css - 使用网格模板区域时需要网格自动行吗？

Question

当您使用 grid-template-areas 定义布局时，是否不需要 grid-auto-rows？我确信情况仍然如此，但删除我编写的那部分代码似乎根本不会影响整体站点布局。我一般问这个问题，代码只是一个例子。

.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>

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid

The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows / grid-auto-columns properties. ^ref