如何在使用max-height时让CSS网格行拉伸以消除间隙？

我希望消除因设置max-height小于头部区域占用空间而出现的橙色间隙，原本以为主内容区域会自动拉伸，但实际并未生效。我尝试使用以下代码也无法解决问题：

grid-template-rows: 1fr auto 1fr;

完整代码如下：

.gridcontainer {
    background-color: orange;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    grid-template-rows: 1fr 8fr 1fr;
}

.gridchild-header {
    grid-area: 1 / 1 / 2 / 4;
    background-color: yellow;
    z-index: 500;
    min-height: 50px;
    max-height: 100px;
}

.gridchild-main {
    grid-area: 2 / 1 / 3 / 3;
    background-color: cyan;
    z-index: 500;
}

.gridchild-sidebar {
    grid-area: 2 / 3 / 3 / 4;
    background-color: red;
    z-index: 500;
}

.gridchild-footer {
    grid-area: 3 / 1 / 4 / 4;
    background-color: purple;
    z-index: 500;
    min-height: 100px;
}

解决方案 #

问题出在你用了固定比例的grid-template-rows: 1fr 8fr 1fr，头部所在的第一行高度是容器总高度的1/10，当头部的max-height小于这个行高时，就会露出容器的橙色背景。调整网格行规则就能解决：

修改.gridcontainer的grid-template-rows为auto 1fr auto，代码如下：

.gridcontainer {
    background-color: orange;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    grid-template-rows: auto 1fr auto; /* 关键修改 */
}

/* 其余样式保持不变 */
.gridchild-header {
    grid-area: 1 / 1 / 2 / 4;
    background-color: yellow;
    z-index: 500;
    min-height: 50px;
    max-height: 100px;
}

.gridchild-main {
    grid-area: 2 / 1 / 3 / 3;
    background-color: cyan;
    z-index: 500;
}

.gridchild-sidebar {
    grid-area: 2 / 3 / 3 / 4;
    background-color: red;
    z-index: 500;
}

.gridchild-footer {
    grid-area: 3 / 1 / 4 / 4;
    background-color: purple;
    z-index: 500;
    min-height: 100px;
}

原理说明 #

• auto：头部和底部行的高度由内部元素决定，头部在min-height到max-height范围内自适应，底部满足min-height要求。
• 1fr：中间行自动占据容器剩余所有空间，主内容区域被拉伸，彻底消除橙色间隙。

内容的提问来源于stack exchange，提问作者Nicolas Zein