如何使自动适配内容高度的Grid项保持统一间距？

CSS Grid本身是基于行列轨道的布局系统，同列的所有项都会对齐轨道的起始/结束位置，所以同列中最高项会撑高整行轨道，导致你看到的空隙——这是Grid的固有特性，靠纯Grid属性没法直接解决。

要实现你要的“每个项跟随前一行位置紧密排列”的效果，最简便的方案是用CSS多列布局（Columns），它天然适配内容高度不一的场景，完全不需要手动设置项的高度：

代码示例 #

/* 容器样式 */
.grid-container {
  column-count: 3; /* 设置3列 */
  column-gap: 1.5rem; /* 列之间的间距，类似Grid的gap */
}

/* 每个子项的样式 */
.grid-item {
  break-inside: avoid; /* 关键：防止单个项被拆分到两列中 */
  margin-bottom: 1.5rem; /* 项之间的垂直间距 */
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

为什么这个方案可行？ #

Columns是一维布局系统：它会先把内容填满第一列，再自动流到下一列，完全根据每个项的实际高度分配位置，不会出现Grid那样因轨道对齐产生的空白。

如果需要响应式适配不同屏幕宽度，可以把column-count换成column-width，让浏览器自动计算列数：

.grid-container {
  column-width: 280px; /* 最小列宽，容器足够宽时自动增加列数 */
  column-gap: 1.5rem;
}

如果一定要用Grid实现，就得靠JavaScript动态计算每个项的位置、调整grid-row和grid-column属性，这种方法复杂度高，不如Columns简洁高效，不推荐。

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