如何在2列Grid布局中根据内容高度自适应利用空闲空间？

你要的这种“瀑布流式”两列填充效果，Grid布局完全可以实现，只是需要调整布局定义方式，而非单纯依赖grid-auto-flow。以下是两种可行的实现思路：

方法1：Grid自动流+动态行分配 #

不需要固定行高，让Grid根据内容自动分配空间，同时利用grid-auto-flow: dense填充空隙：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  grid-auto-flow: dense; /* 自动填充空闲空间 */
  gap: 10px; /* 可选，设置列/行间距 */
}

.red, .green, .blue {
  /* 无需固定行位置，让Grid自动分配 */
}

.blue {
  grid-column: span 1; /* 确保蓝色内容占1列 */
}

这种方式下，Grid会自动将蓝色元素放到高度较小的列下方，无论红/绿谁更高，都能填满空闲空间。

方法2：CSS多列布局（更简洁） #

如果不需要复杂的Grid特性，CSS原生多列布局更适配这种流式填充场景：

.container {
  columns: 2; /* 分为2列 */
  column-gap: 10px; /* 列间距 */
}

.red, .green, .blue {
  break-inside: avoid; /* 避免元素被列分割 */
  margin-bottom: 10px; /* 元素间间距 */
}

该方式会自动按顺序将内容填充到两列，一列填满后自动流至下一列，完美实现“短列下方补位”的效果。

为什么你之前的Grid尝试没成功？ #

大概率是你把红、绿元素强制放在了同一Grid行（比如显式设置grid-row: 1），导致它们被拉伸至等高，蓝色元素只能放在下一行。只要去掉固定行定位，让Grid自动管理行分配，就能实现动态填充。

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