为什么我的 CSS 网格，菜单没有占据整个行的长度？

Question

如何使“菜单”div 占据整个行的长度？我已将它定义为占用整行，但它在网格的第 3 层停止。

我的代码-

.wrapper{
border: 1px solid black;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
grid-template-rows: 40px auto 40px;
/* grid-auto-rows: auto; */
grid-gap: 5px;
background-color: chartreuse;}

.wrapper > div{
font-size: 1.8rem;
text-align: center;
border: 1px solid blue;
background-color: burlywood;}

.header{
grid-column: 2/-1;}

.menu{
grid-row: 1/4;}

.content{
grid-column: 2/-1;
grid-row: 2/4;}

.footer{
grid-column: 2/-1;}

Answer 1

您已将.content 区域设置为扩展到第 3 行：

.content {
    grid-column: 2/-1;
    grid-row: 2/4; }   <-- spans across rows 2 and 3

这意味着.footer 区域被推入第 4 行，即行4/5。

所以.menu 区域完全按照您的要求进行：

.menu {
    grid-row: 1/4; }   <-- spans across rows 1, 2 and 3, aligning with
                           header and content areas.

如果您希望它与第二列（包括.footer 区域）等高，您可以这样做：

.menu {
    grid-row: 1/5; }

或者这个

.content {
    grid-column: 2/-1;
    grid-row: 2/3; }

Answer 2

您正在使用grid，这是一个不错的选择；但是有一个网格功能，您在这里没有使用，它是针对您所面临的确切挑战的量身定制的解决方案。

它叫grid-template-areas：

.wrapper {
    grid-template-areas:
        'menu header'
        'menu main'
        'menu footer';
}

这样定义布局后，您可以简单地使用：

.header    { grid-area: header; }
.menu      { grid-area: menu;   }
.content   { grid-area: main;   }
.footer    { grid-area: footer; }

这是（恕我直言）一种更清晰的方式。

---

然后，您可以删除原始 CSS 中列出的所有 grid-template-columns、grid-template-rows、grid-auto-rows、grid-column 和 grid-row 属性。

---

至于如何控制区域何时拉伸（或不拉伸），基本上有 2 个属性（每个有 2 个值），让您控制一切：

.wrapper {
    place-items:       stretch / stretch;
    place-content:     stretch / stretch;
}

和你喜欢的人一起玩。 一些有效值是： center |拉伸|开始 |结束 |周围空间|间隔|空间均匀 | ....