CSS Grid两列布局内容错位问题求助

你当前用Grid布局出现空白的原因是：Grid默认按网格单元格规则排列，子元素会对齐到每行最高元素的底部，导致列间出现不必要的空白。要实现两列独立流式排列（子元素各自按顺序堆叠、互不对齐），可采用以下方案：

方法一：CSS多列布局（推荐） #

这是实现此类需求最直接的方式，子元素会自动按顺序填充到两列中，完全独立堆叠：

.mainContent {
  column-count: 2;
  column-gap: 20px; /* 设置列间距 */
}

.content {
  margin-bottom: 20px;
  background: green;
  break-inside: avoid; /* 防止子元素被拆分到两列中 */
}

<div class='mainContent'>
  <div class='content' style="height:200px"></div>
  <div class='content' style="height:500px"></div>
  <div class='content' style="height:100px"></div>
  <div class='content' style="height:700px"></div>
  <div class='content' style="height:500px"></div>
  <div class='content' style="height:300px"></div>
</div>

方法二：调整Grid布局实现 #

如果坚持使用Grid，可通过grid-auto-flow: dense让子元素自动填充空白网格（注：此方式会填充空白区域，和完全独立的流式布局效果略有差异）：

.mainContent {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 20px;
  grid-auto-flow: dense; /* 自动填充空白网格单元格 */
}

.content {
  margin-bottom: 20px;
  background: green;
}

若需要严格的“第一列排满再排第二列”的独立顺序，优先选择方法一的多列布局。

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