我在学习CSS Grid时正在尝试制作一个简单的布局。
布局应如下所示：">
页眉页眉"广告内容内容"广告页脚页脚">
我得到的是：">
标题标题标题">
"adv 内容内容">
"。 页脚页脚">
div"adv"从不占用垂直空间，无论我使用上面的模板区域还是使用网格行和列作为下面的代码来做到这一点都没有关系。 事实上，我无法垂直操作我的任何div。我不能让它们跨越几行。有人可以告诉我我做错了什么吗？
body {
background: dimgray;
}
div {
height: 200px;
font-size: 50px;
font-family: sans-serif;
color: floralwhite;
}
.header {
background-color: lightcoral;
grid-column: 1 / 4;
}
/*Div having the issue below*/
.adv {
background-color: blue;
grid-row: 2/4;
/*Expecting to span from row 2 to 4, but not happening.*/
}
/*Div having the issue above*/
.content {
background: pink;
grid-column: 2/4;
}
.footer {
background-color: salmon;
grid-column: 2/4;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}<body>
<div class="container">
<div class="header">header
</div>
<div class="adv">adv
<!--Div with the issue-->
</div>
<div class="content">content
</div>
<div class="footer">footer</div>
</div>
</body>您的网格布局很好，问题在于：div {height: 200}，删除高度，它将按预期工作。
您强制所有div 的高度相同。这当然意味着adv不能像两个div那么大。所以试试这个，如果你仍然需要所有div的最小高度(或者只是一起删除高度(：
div {
min-height: 200px; /* min/max-height is preferred to `height` for flexible layouts like grid and flex-box. */
font-size: 50px;
font-family: sans-serif;
color: floralwhite;
}
body {
background: dimgray;
}
div {
min-height: 200px; /* height means that all divs will be the same hieght which prevents the layout you want. Min-height is more correct here. */
font-size: 50px;
font-family: sans-serif;
color: floralwhite;
}
.header {
background-color: lightcoral;
grid-column: 1 / 4;
}
/*Div having the issue below*/
.adv {
background-color: blue;
grid-row: 2/4;
/*Expecting to span from row 2 to 4, but not happening.*/
}
/*Div having the issue above*/
.content {
background: pink;
grid-column: 2/4;
}
.footer {
background-color: salmon;
grid-column: 2/4;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}<body>
<div class="container">
<div class="header">header
</div>
<div class="adv">adv
<!--Div with the issue-->
</div>
<div class="content">content
</div>
<div class="footer">footer</div>
</div>
</body>尝试：
div.container {
display: grid;
grid-template-areas: 'h h h' 'a c c' 'a f f';
}
.header { grid-area: h; }
。
模板列和行只能绘制简单表。
模板区域允许自定义显示。