CSS flexbox/grid两列相邻行高度不一 如何实现无空隙紧凑排布？

两种可实现dense紧凑排布的方案 #

方案1：CSS Grid 开启dense自动填充

你之前使用Grid布局未达到效果，是缺少核心属性grid-auto-flow: dense，该属性会自动让后续元素填充前面的单元格空隙，完美适配隐式行场景：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 固定两列 */
  grid-auto-flow: dense; /* 开启紧凑填充 */
  gap: 12px; /* 可自定义全局间距，不需要则设为0 */
}

不需要对子元素做额外配置，高度不一致的元素会自动补位，最终效果和你给出的期望效果完全一致。

期望效果：

你当前的效果：

方案2：CSS多列布局（column）

如果你不需要按行优先排序元素，多列布局实现紧凑排布的代码更简洁，天然无空隙：

.masonry-container {
  column-count: 2; /* 两列布局 */
  column-gap: 12px; /* 列间距 */
}
.masonry-item {
  break-inside: avoid; /* 防止单个元素被切割分到两列 */
  margin-bottom: 12px; /* 元素上下间距 */
}

该方案的元素排序逻辑是先填满左列再填右列，适合瀑布流类的展示场景。

选型建议 #

• 如果需要元素按行优先排序、或者有跨列展示的元素，优先选Grid+dense方案
• 如果仅需要纯紧凑的瀑布流展示，多列布局的兼容性和实现成本更低

内容的提问来源于stack exchange，提问作者plexus-creator