为什么在网格模板区域中没有网格区域名称会创建额外的轨迹？ [英] Why does a grid-area name absent in grid-template-areas create additional tracks?

问题描述

我已经创建了一个简单的CSS网格，我决定不指定grid-template、grid-template-columns、grid-template-rows属性。

相反，我从grid-template-areas开始，并通过grid-area属性将区域名称分配给网格项目。

之后，我对从grid-template-areas中删除网格项会发生什么感兴趣。结果有点奇怪。

删除的网格项放在右侧，并由附加栏分隔。

问题：

为什么会发生这种情况？这是意料之中的行为，还是我在代码中遗漏了什么？如何删除此栏？

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

推荐答案

此答案分为四个部分。前三个帮助解释了第四个，它涵盖了增加专栏的原因。如果您只对答案感兴趣，请跳到结尾。

内容：

1. 非同小可：还多了一排！
2. grid-area属性。
3. grid-template-areas属性。
4. 未引用的网格区域的放置。

---

1.超乎想象：还多了一行！

您只定义了问题的一部分。是的，还有一个栏目。但也有额外的一行。

因为您没有在网格容器上定义高度，所以高度默认为auto&ndash；内容的高度(more details)。因此，任何没有内容的行都会折叠，并且不可见。

宽度不存在此问题，因为在本例中，您使用的是块级容器(由display: grid创建)，默认情况下(more details)设计为使用其父对象的全宽度。

这就是为什么你看不到额外的一行。如果为容器指定一定的高度，则将显示该行。

body {
  display: grid;
  grid-template-areas:
    "header"
    "footer";
  height: 150px; /* new */ 
}

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

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";
}

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

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>

---

2.grid-area属性。

为grid-area属性命名将为区域的每一侧创建一个named line。

例如，grid-area: header按如下顺序进行解析：

• grid-row-start: header
• grid-column-start: header
• grid-row-end: header
• grid-column-end: header

与margin、border和padding一样，grid-area属性是速记属性。与这些属性不同，grid-area具有逆时针解析顺序(在Ltr语言中)，如上所述。

因为命名网格区域占用空间，所以它们需要在其中存在行和列。因此，命名网格区域始终会影响布局，即使它们在grid-template-areas中未被引用。

因此，"修复"布局所需的全部操作就是删除grid-area: main。

main {
  /* grid-area: main; */
  background: darkorange;
}

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

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>

---

3.grid-template-areas属性。

使用grid-template-rows、grid-template-columns或grid-template-areas创建的行和列(a/k/a轨道)属于显式网格。未由这些属性定义的任何曲目都属于隐式网格(source)。

为grid-template-areas中列出的每个字符串创建一个新行。

对于字符串中的每个名称或点序列(...)，都会创建一个新列(但这不适用于本例，因为每个字符串只有一个名称)。

您的代码创建了一个两行一列的显式网格：

body {
  display: grid;
  grid-template-areas: 
    "header"
    "footer";
}

如图所示，header和footer有自己的行，并存在于第一列中，与grid-template-areas中定义的完全相同。

另外两行和两列是隐式网格的一部分。

我们可以通过调整大小来验证这一点。

grid-template-columns仅适用于显式列。

grid-auto-columns主要处理隐式列(请参阅下面的注释)。

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;
}

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">

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>