CSS Grid列内元素连续排列 消除行间距异常问题

问题根源：默认CSS Grid采用行优先排列，每行高度由该行最高元素决定，导致列内元素被行高撑开，出现额外间距。

方案一：使用CSS多列布局（推荐，简单直接） #

直接改用CSS多列布局，元素会自动在列内连续排列，仅保留设置的元素间距：

.grid-wrapper {
  columns: 2; /* 定义两列 */
  column-gap: 5vw; /* 列间距 */
}

.grid-item {
  background-color: red;
  margin-bottom: 5vw; /* 列内元素间距 */
  break-inside: avoid; /* 避免元素被列分割成两部分 */
}

方案二：CSS Grid调整实现（保持Grid布局） #

通过设置列优先排列，让元素先填满第一列再填充第二列，同时每行高度自适应内容：

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto; /* 每行高度随内容变化 */
  grid-auto-flow: column; /* 按列优先顺序排列元素 */
  grid-column-gap: 5vw;
  grid-row-gap: 5vw; /* 用网格行间距代替margin-bottom */
}

.grid-item {
  background-color: red;
}

注意：此方案会改变元素排列顺序，第一列将依次放置第1、3个元素，第二列放置第2、4个元素。

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