我创建了一个简单的 CSS 网格，我决定不指定grid-template, grid-template-columns, grid-template-rows特性。
相反，我开始于grid-template-areas，并分配地区名称 to the 网格项 via grid-area财产。
之后，我对如果删除会发生什么感兴趣网格项 from grid-template-areas。结果有点奇怪。
被移除的网格项位于右侧并由附加栏。
The problem:
为什么会发生这种情况？这是预期的行为还是我在代码中遗漏了某些内容？如何删除该列？
body {
display: grid;
grid-template-areas:
"header"
"footer";
}
header {
grid-area: header;
background: lightblue;
}
main {
grid-area: main;
background: darkorange;
}
footer {
grid-area: footer;
background: blue;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>这个答案有四个部分。前三个有助于解释第四个，其中涵盖了额外列的原因。如果您只对答案感兴趣，请跳至最后。
内容：
grid-area财产。grid-template-areas财产。您只部分定义了问题。是的，还有一个额外的列。但还有一个额外的行。
由于您尚未在网格容器上定义高度，因此高度默认为auto– 内容的高度（更多细节 https://stackoverflow.com/a/46546152/3597276）。因此，任何没有内容的行都会折叠起来并且不可见。
宽度不存在此问题，因为在本例中，您使用的是块级容器（由display: grid），它被设计为消耗其父级的整个宽度，默认情况下（更多细节 https://stackoverflow.com/a/46546152/3597276).
这就是为什么您没有看到额外的行。如果给容器一定的高度，就会出现该行。
body {
display: grid;
grid-template-areas:
"header"
"footer";
height: 150px; /* new */
}
body {
display: grid;
grid-template-areas:
"header"
"footer";
height: 150px; /* new */
}
header {
grid-area: header;
background: aqua;
}
main {
grid-area: main;
background: darkorange;
}
footer {
grid-area: footer;
background: lightgreen;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>注意：如果您使用过display: inline-grid，额外的行和额外的列都将是不可见的。
body {
display: inline-grid;
grid-template-areas:
"header"
"footer";
}
body {
display: inline-grid; /* adjustment */
grid-template-areas:
"header"
"footer";
}
header {
grid-area: header;
background: aqua;
}
main {
grid-area: main;
background: darkorange;
}
footer {
grid-area: footer;
background: lightgreen;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>grid-area财产。给它起个名字grid-area财产创造了一个命名线 https://www.w3.org/TR/css3-grid-layout/#implicit-named-line对于该区域的每一侧。
例如，grid-area: header按顺序解决，如下所示：
grid-row-start: headergrid-column-start: headergrid-row-end: headergrid-column-end: headerLike margin, border and padding, the grid-area https://developer.mozilla.org/en-US/docs/Web/CSS/grid-areaproperty 是属性的简写。与这些属性不同的是，grid-area具有逆时针分辨率顺序（在 LTR 语言中），如上所示。
由于命名网格区域占用空间，因此它们需要存在行和列。因此，命名的网格区域总是会影响布局，即使它们没有被引用grid-template-areas.
因此，“修复”布局所需的就是删除grid-area: main.
main {
/* grid-area: main; */
background: darkorange;
}
body {
display: grid;
grid-template-areas:
"header"
"footer";
}
header {
grid-area: header;
background: aqua;
}
main {
/* grid-area: main; */
background: darkorange;
}
footer {
grid-area: footer;
background: lightgreen;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>grid-template-areas财产。使用创建的行和列（a/k/a 轨道）grid-template-rows, grid-template-columns or grid-template-areas属于显式网格。任何未由这些属性定义的轨道都属于隐式网格 (source https://www.w3.org/TR/css3-grid-layout/#explicit-grids).
对于中列出的每个字符串grid-template-areas https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas，创建一个新行。
对于每个名称或点序列（...）在字符串中，会创建一个新列（但这不适用于本例，因为每个字符串只有一个名称）。
您的代码创建一个包含两行和一列的显式网格：
body {
display: grid;
grid-template-areas:
"header"
"footer";
}
正如你在图片中看到的，header and footer有自己的行并存在于第一列中，与中定义的完全相同grid-template-areas.
额外的两行和两列是隐式网格的一部分。
我们可以通过调整它们的大小来验证这一点。
grid-template-columns https://www.w3.org/TR/css3-grid-layout/#track-sizing仅适用于显式列。
grid-auto-columns https://www.w3.org/TR/css3-grid-layout/#implicit-grids works mostly在隐式列上（参见下面的注释）。
body {
display: grid;
grid-template-areas: "header" "footer";
grid-template-columns: 1fr;
grid-auto-columns: 100px;
grid-template-rows: 100px 100px;
grid-auto-rows: 25px;
}
body {
display: grid;
grid-template-areas:
"header"
"footer";
grid-template-columns: 1fr;
grid-auto-columns: 100px;
grid-template-rows: 100px 100px;
grid-auto-rows: 25px;
}
header {
grid-area: header;
background: aqua;
}
main {
grid-area: main;
background: darkorange;
}
footer {
grid-area: footer;
background: lightgreen;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>Note: If grid items are placed using grid-template-areas (creating explicit tracks), but they are not sized using grid-template-columns / grid-template-rows, then grid-auto-columns / grid-auto-rows apply to them. (second paragraph) https://www.w3.org/TR/css-grid-1/#explicit-grids
body {
display: grid;
grid-template-areas:
"header"
"footer";
grid-auto-columns: 100px;
grid-auto-rows: 25px;
}
body {
display: grid;
grid-template-areas:
"header"
"footer";
grid-auto-columns: 100px;
grid-auto-rows: 25px;
}
header {
grid-area: header;
background: aqua;
}
main {
grid-area: main;
background: darkorange;
}
footer {
grid-area: footer;
background: lightgreen;
}<header>Header</header>
<main>Main</main>
<footer>Footer</footer>注意：老实说，我大约 75% 确信本节是完全正确的。规范语言对我来说并不是 100% 清楚。我欢迎反馈、更正和更准确的答案。
在您的代码中，您有第三个网格区域，该区域未在grid-template-areas.
body {
display: grid;
grid-template-areas:
"header"
"footer";
}
main {
grid-area: main;
background: darkorange;
}
哪里有grid-area: main go?
正如我们已经看到的，它被发送到隐式网格中，其中有两列和两行。
网格区域由网格自动放置算法 https://www.w3.org/TR/css3-grid-layout/#placement，这似乎是这样说的：
Because grid-area: main没有显式定义（参见上面第 3 节），它属于隐式网格。
由于网格列线 2 和网格行线 3（显式网格的边界）被命名为网格线，因此必须在隐式网格中创建新线以容纳 4 条命名线grid-area: main。这只能发生在中间有空行和空列的情况下，将显式网格与自动放置的隐式网格区域分开。