CSS "grid-template-areas"无法按预期工作

Question

我想当我在grid-template-areas属性内键入.(空白字段(时，.item5将显示在under字段内。但它显示在.字段内部。为什么它会那样工作？

body {
margin: 0;
}
.item1  {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px; 
background-color: #2196F3;
padding: 10px; 
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>  
<div class="item4">4</div>
<div class="item5">5</div>
</div>

Answer 1

来自规范：

一个或多个"的序列"(U+002E FULL STOP(，表示一个空单元格标记。

和

空单元格标记表示网格容器中的未命名区域。

未命名区域并不意味着项目不能放置在那里。它只是意味着未命名，自动放置算法将从上到下开始，因此item5的第一个空区域是未命名区域。

您可以在此处遵循完整的算法：https://www.w3.org/TR/css-grid-1/#auto-放置算法，在那里你会发现对未命名区域或命名区域没有限制。如果你的item5是单独的，它将被放入的第一行/列(名为"头"的行/列(

body {
margin: 0;
}
.item1  {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px; 
background-color: #2196F3;
padding: 10px; 
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

<div class="grid-container">
<div class="item5">5</div>
</div>

相关的问题，我给出了一个关于放置算法的更详细的解释：

CSS网格：自动放置算法如何工作

Answer 2

根据您的上一条评论，我认为您希望有网格auto-flow:column，但这不是默认样式。

我把它添加到片段中：

body {
margin: 0;
}
.item1  {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
grid-auto-flow: column;
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px; 
background-color: #2196F3;
padding: 10px; 
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>  
<div class="item4">4</div>
<div class="item5">5</div>
</div>