我是第一次开始使用 Grid CSS。我想在每个项目之间放置不同的空间，但我不想使用
grid-gap我想将每个项目间隔不同的距离（
bottomtopItem1Item2然后我想隔开
Item2Item3我尝试过使用像
padding-toppadding-bottomgrid-template-areas我认为 grid-gap 可以单独用于每个元素，但我需要一些解决方案来专门选择空间的一侧
什么解决方案可以让我通过选择
topbottomleftrightHTML
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="grid-container">
<div class="grid-item1 x">Item 1</div>
<div class="grid-item2">Item 2</div>
<div class="grid-item3">Item 3</div>
</div>
</body>
</html>
CSS
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-auto-rows: auto auto auto auto;
grid-gap: 0px;
grid-template-areas:
"topbar topbar topbar topbar topbar"
"navbar navbar navbar navbar navbar"
"icon-bar icon-bar icon-bar icon-bar icon-bar";
}
.grid-item1 {
grid-area: topbar;
background-color: #cc0000 !important;
height: 68px;
}
.grid-item2 {
grid-area: navbar;
background-color: #ae0000 !important;
height: 33px;
}
.grid-item3 {
background: green;
text-align: center;
border: black 5px solid;
grid-area: icon-bar;
}
HTML
顺便说一句，
stile.css <link href="stile.css" rel="stylesheet" type="text/css">
CSS
在
.grid-containergrid-template-areasheight通常我们不使用
.grid-item1.grid-item2.grid-item3.grid-item相反，您可以使用
grid-row-startgrid-row-end.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-auto-rows: auto;
grid-gap: 0;
}
.grid-item {
background-color: #cc0000;
text-align: center;
border: 5px solid black;
}
.grid-item.x {
grid-row-start: 1;
grid-row-end: 3;
}
.grid-item:nth-child(2) {
margin-top: 20px;
}
.grid-item:nth-child(3) {
margin-top: 40px;
}