使用网格模板区域时是否需要网格自动行？

Question

使用网格模板区域来定义布局时，网格自动行是否不必要？我非常确信情况仍然如此，但是删除我编写的那部分代码似乎根本不会影响整个网站布局。我通常在问这个问题，代码只是一个例子。

.wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-template-areas:
    "nav nav nav nav nav nav nav nav"
    "area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area2 area2 area2 area2 area2 area2 area2 area2 "
"area2 area2 area2 area2 area2 area2 area2 area2 "
  "footer footer footer footer footer footer footer footer";
}

Answer 1

您未定义任何grid-template-rows，因此，如果要设置行的高度，则需要它。没有它，每一行的高度都将定义为auto，但是在您的情况下，minmax(50px,auto)也会使用auto部分，因为50px小于您的内容。如果行为空，则将有50px。

这里是查看差异的示例：

.wrapper {
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    grid-template-areas:
    "nav "
    "area1 "
"area1"
"area1"
"area1 "
"area2  "
"area2 "
  "footer ";
  margin:10px;
}
.nav {grid-area:nav}
.area1 {grid-area:area1}
.area2 {grid-area:area2}
.footer {grid-area:footer}

.wrapper > div {
  border:1px solid red;
}

<div class="wrapper">
<div class="nav"></div>
<div class="area1"></div>
<div class="area2"></div>
<div class="footer"></div>
</div>

<div class="wrapper" style="grid-auto-rows: minmax(10px, auto);">
<div class="nav"></div>
<div class="area1"></div>
<div class="area2"></div>
<div class="footer"></div>
</div>

grid-template-rows，grid-template-columns和grid-template-areas这三个属性共同定义了显式网格

显式网格的大小取决于由grid-template-area定义的行/列数和grid-template-rows / grid-template-columns大小的行/列数中的较大者。由grid-template-rows / grid-template-columns定义的网格模板区域但未设置大小的任何行/列均采用grid-auto-rows / grid-auto-columns属性的大小。 ^ref