CSS Grid Layout 基于内容高度自动调整行列实现自适应排列方案

你当前使用的默认Grid布局是行优先排列规则，不会自动填补纵向空白，因此无法实现基于内容高度的自适应排布，可选择以下两种方案调整：

方案1：CSS Grid方案（可控性更高，支持行优先排列） #

适合需要保留DOM元素从左到右排列优先级的场景，修改代码如下：

容器样式调整 #

{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px; /* 新增纵向间距，可自行调整数值 */
    grid-auto-rows: minmax(80px, auto); /* 基础行高，根据你最小内容块的高度调整 */
    grid-auto-flow: dense; /* 开启密集填充模式，自动填补列内空白位置 */
}

大高度项样式配置 #

你可以通过JS动态判断网格项的内容高度，高度超过阈值的项自动添加该类，实现单独占一列的效果：

.grid-item--large {
    grid-row: span 2; /* 占2行高度，实现单列单独占用 */
}

方案2：CSS多列布局（无需手动干预，完全自动适配） #

如果你不需要严格控制元素排列顺序，优先选择该方案，原生支持按内容高度自动排布，完全符合你的需求：

容器样式调整 #

{
    column-count: 3; /* 指定3列布局 */
    column-gap: 20px; /* 列间距和原有设置保持一致 */
}

网格项通用样式 #

.grid-item {
    break-inside: avoid; /* 禁止单个网格项被拆分到两列显示 */
    margin-bottom: 20px; /* 网格项之间的纵向间距，可自行调整 */
}

该方案会自动把高度较小的项堆叠到同一列，高度较大的项单独占用列的纵向空间，自动实现column3排布到column2下方、column4补位到原column3位置的效果，所有元素均会根据内容高度自动调整排布。

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