为什么具有网格区域名称但未在grid-template-area中定义的网格项目会创建附加列？

我们有一个网格项，仅在其中设置grid-row-start，最终结果是两行，其中有一个空行。因为我们没有定义任何显式网格，所以它们都在隐式网格中。

要了解发生了什么，请参考规范：

网格模板行，网格模板列和网格模板区域这三个属性共同定义了网格容器的显式网格。...如果这些属性没有定义任何明确的轨迹，则明确的网格在每个轴上仍然包含一条网格线。^参考

因此，即使我们什么也没定义，我们仍然有一个包含两行的显式网格。这非常重要，因为如果没有这些行，我们将没有空行。

现在说明部分grid-row-start:header：

第一次尝试将网格区域的边缘与命名网格区域匹配：如果有一条名为“ -start（对于grid- -start）/ -end”（对于 grid-- end）的命名行，则贡献第一个这样的行到网格项目的位置。

否则，将其视为1已与一起指定了整数。

显然，我们将陷入否则，将有grid-row-start:header 1：

&& ?

将第N条网格线贡献给网格项目的位置...

如果将名称指定为，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。

在我们的情况下，该名称的行数不够（根本没有任何行），因此我们应至少添加一行具有该名称的行，然后尝试放置元素，并且由于整数为正数，因此项目将放置在该行下方：

网格有一条默认行（红色），使用会在其下header方生成一个新的隐式行（由于1自动添加了默认值），并且该元素将放置在该行下方，从而创建了额外的一行。

如果我们使用-1的话，最后只会有一行：

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header -1;
  background: blue;
}

  H

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header -1;
  background: blue;
}

footer {
  grid-row-start: header 1;
  background: red;
}

  H
  

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header 1;
  background: blue;
}
main {
  grid-row-start: main 1;
  background: red;
}
footer {
  grid-row-start: footer -1;
  background: green;
}
extra {
  grid-row-start: extra 5;
  background: orange;
}

  H
  
M
  
  E

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header;
  grid-row-end: header;
  background: blue;
}

  H

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header;
  grid-row-end: foo;
  background: blue;
}

  H

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header 1;
  grid-row-end: foo 2;
  background: blue;
}

  H

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: hello 1;
  grid-row-end: john 3;
  background: blue;
}
main {
  grid-row-start: main 1;
  grid-row-end: hi 2;
  background: red;
}
footer {
  grid-row-start: footer 2;
  grid-row-end: custom 5;
  background: green;
}
extra {
  grid-row-start: extra 3;
  grid-row-end: fsdfsdfsdfsd 5;
  background: orange;
}

  H
  
M
  
  E

body {
  display: grid;
  grid-template-areas: 
     "header"
     "footer";
  /* No relevant but to better illustrate*/
  grid-auto-rows:50px;
  grid-auto-columns:50px;
}

header {
  grid-area: header;
  background: lightblue;
}

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

footer {
  grid-area: footer;
  background: blue;
}

Header

grid-row-start:main 1;
grid-row-end:main 1;
grid-column-start:main 1;
grid-column-end:main 1;

grid-row-start:main 1
grid-column-start:main 1

body {
  display: grid;
  grid-template-areas: 
     "header"
     "footer";
  /* No relevant but to better illustrate*/
  grid-auto-rows:50px;
  grid-auto-columns:50px;
}

header {
  grid-area: header;
  background: lightblue;
}

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

footer {
  grid-area: footer;
  background: blue;
}

Header
Main

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
Main

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

extra {
  grid-area: extra;
  background: red;
  opacity:0.8;
}
more {
  grid-area: more;
  background: green;
  opacity:0.3;
}

Header
Main

E
More

grid-row-start: 1;
grid-column-start: 1;

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
Main

.container {
  width:100px;
  display: inline-grid;

  grid-auto-rows: 40px;
  border: 1px solid;

}
header {
  grid-row-start: header;
  background: blue;
}

  H