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

【问题标题】：Grid-auto-row necessary when using grid-template-areas?使用网格模板区域时需要网格自动行吗？
【发布时间】：2020-01-11 20:08:35
【问题描述】：

当您使用 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";
}

【问题讨论】：

标签： css css-grid

【解决方案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-areas 定义的行/列数和grid-template-rows/grid-template-columns 定义的行/列数中的较大者确定。任何由 grid-template-areas 定义的行/列但不是由grid-template-rows/grid-template-columns 调整大小 的大小来自grid-auto-rows / grid-auto-columns 属性。 ^ref

【讨论】：