不使用grid-template-rows如何让网格布局内的行元素正常堆叠

问题描述 #

我想要让网格中的.item-1和.item-2元素自然上下堆叠，初始示例代码如下：

.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto 1fr;
}

.item {
    padding: 10px;
    border: 1px solid black;
}

.item-1 {
    grid-column: 1 / 3;
}

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

.item-3 {
    grid-column: 3 / 7;
    grid-row: 1 / 3;
    
    padding: 80px 20px;
}

<div class="grid">
    <div class="item item-1">
        item-1
    </div>
    
    <div class="item item-2">
        item-2
    </div>
    
    <div class="item item-3">
        item-3
    </div>
</div>

以上是简化示例，实际开发中遇到的场景存在更多位置不定的行元素，例如大尺寸元素排在前面，或者完全没有大尺寸元素的情况，因此无法使用grid-template-rows进行配置，也找不到无需该属性就能让元素正常堆叠的方案。

已经尝试过多种方案，包括使用grid-auto-rows、各类grid-*和align-*属性，还有将高度和边距设置为auto、fit-content等，均未成功。

移除grid-template-rows属性后默认表现下.item-1和.item-2出现间距、高度相等的异常问题，对应代码如下：

.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
}

.item {
    padding: 10px;
    border: 1px solid black;
}

.item-1 {
    grid-column: 1 / 3;
}

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

.item-3 {
    grid-column: 3 / 7;
    grid-row: 1 / 3;
    
    padding: 80px 20px;
}

<div class="grid">
    <div class="item item-1">
        item-1
    </div>
    
    <div class="item item-2">
        item-2
    </div>
    
    <div class="item item-3">
        item-3
    </div>
</div>

期望实现的布局效果如下：

解决方案 #

问题核心原因是跨多行的元素（.item-3）会撑开网格整体高度，默认情况下网格会将高度均分给涉及的所有行，导致左侧两个元素所在的行被拉伸，出现多余间距。

无需固定grid-template-rows配置，通过两个属性的组合即可适配动态行数场景：

1. 给网格容器设置grid-auto-rows: min-content，让所有自动生成的行高度完全由行内内容决定，不会自动拉伸
2. 给跨多行的元素设置align-self: stretch，让跨行元素自动拉伸填满所在行的总高度，不会被行高限制

修改后的完整代码如下：

.grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    /* 自动生成的行高度由内容决定 */
    grid-auto-rows: min-content;
}

.item {
    padding: 10px;
    border: 1px solid black;
}

.item-1 {
    grid-column: 1 / 3;
}

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

.item-3 {
    grid-column: 3 / 7;
    grid-row: 1 / 3;
    padding: 80px 20px;
    /* 跨行元素自动拉伸填满行高 */
    align-self: stretch;
}

<div class="grid">
    <div class="item item-1">
        item-1
    </div>
    
    <div class="item item-2">
        item-2
    </div>
    
    <div class="item item-3">
        item-3
    </div>
</div>

该方案完全适配动态行数、跨列元素位置不定的场景，无需提前配置行模板，元素会按照内容高度自然堆叠。

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