如何用CSS Grid实现元素垂直排列的三列可变高度列表

你当前的问题出在Grid的全局行轨道机制：所有列的元素共享同一组行轨道，导致每行的高度由该行最高的元素撑开，所以第一、三列的元素会被第二列的高元素“带高”，出现不必要的空隙。

要实现列内元素高度独立、垂直排列的效果，推荐两种方案：

方案1：嵌套Grid（推荐，灵活易维护） #

修改HTML结构，把每列的元素放在单独的列容器里，让外层Grid负责列的横向排列，内层Grid负责列内元素的垂直堆叠，这样每列的行轨道完全独立，互不影响。

代码示例 #

.wrapper {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; /* 控制列之间的间距 */
}

.column {
  display: grid;
  gap: 10px; /* 控制列内元素的间距 */
}

.first-column .item {
  height: 200px;
  background-color: skyblue;
}

.second-column .item {
  height: 500px;
  background-color: aquamarine;
}

.third-column .item {
  height: 300px;
  background-color: silver;
}

<ul class="wrapper">
  <li class="column first-column">
    <div class="item"></div>
    <div class="item"></div>
  </li>
  <li class="column second-column">
    <div class="item"></div>
    <div class="item"></div>
  </li>
  <li class="column third-column">
    <div class="item"></div>
    <div class="item"></div>
  </li>
</ul>

方案2：不修改HTML结构（仅适用于固定数量元素） #

如果不能改动原有HTML结构，可以通过手动指定每个元素的grid-column和grid-row，让不同列的元素占据完全独立的行轨道，避免行高互相影响。缺点是元素数量变化时需要手动调整代码，灵活性差。

代码示例 #

.wrapper {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(6, auto); /* 为6个元素创建6个独立行 */
  gap: 10px;
}

/* 第一列元素：占据第1、2行 */
.first-column:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.first-column:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

/* 第二列元素：占据第3、4行 */
.second-column:nth-child(3) {
  grid-column: 2;
  grid-row: 3;
}
.second-column:nth-child(4) {
  grid-column: 2;
  grid-row: 4;
}

/* 第三列元素：占据第5、6行 */
.third-column:nth-child(5) {
  grid-column: 3;
  grid-row: 5;
}
.third-column:nth-child(6) {
  grid-column: 3;
  grid-row: 6;
}

.first-column {
  height: 200px;
  background-color: skyblue;
}

.second-column {
  height: 500px;
  background-color: aquamarine;
}

.third-column {
  height: 300px;
  background-color: silver;
}

<ul class="wrapper">
  <li class="first-column"></li>
  <li class="first-column"></li>
  <li class="second-column"></li>
  <li class="second-column"></li>
  <li class="third-column"></li>
  <li class="third-column"></li>
</ul>

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