如何解决CSS Grid列项目数量不均时元素不顶格问题

你当前的CSS Grid布局里，列内项目会对齐到共享的行高度，导致下一列的项目无法从顶部开始紧密排列——这是因为Grid默认会创建共享行高的网格，每行高度由该行最高元素决定，列内项目被迫适配这些行，产生不必要的间隙。

下面提供两种针对性解决方案：

方案一：拆分独立列容器（精确控制每列内容） #

重构HTML结构，用Grid容器包裹3个独立的垂直Flex列容器，让每列的内容自行紧密排列，不受其他列影响。

代码示例 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3个等宽列 */
  gap: 10px; /* 列之间的间距 */
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 列内项目的间距 */
}

.grid-item {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid #000;
  text-align: center;
}

<div class="grid-container">
  <div class="column">
    <div class="grid-item">Item 1.1</div>
    <div class="grid-item">Item 1.2</div>
    <div class="grid-item">Item 1.3</div>
  </div>
  <div class="column">
    <div class="grid-item">Item 2.1</div>
    <div class="grid-item">Item 2.2<br>foo</div>
    <div class="grid-item">Item 2.3<br>foo</div>
    <div class="grid-item">Item 2.4</div>
    <div class="grid-item">Item 2.5</div>
  </div>
  <div class="column">
    <div class="grid-item">Item 3.1</div>
    <div class="grid-item">Item 3.2</div>
  </div>
</div>

方案二：CSS多列布局（自动流式排列） #

如果只需要内容从上到下排满一列后自动流入下一列（类似报纸排版），用CSS Columns更简单，无需手动拆分列。

代码示例 #

.column-container {
  columns: 3; /* 指定列数 */
  column-gap: 10px; /* 列间距 */
}

.grid-item {
  break-inside: avoid; /* 禁止元素被拆分到两列 */
  background-color: lightblue;
  padding: 10px;
  border: 1px solid #000;
  text-align: center;
  margin-bottom: 10px; /* 列内项目间距 */
}

<div class="column-container">
  <div class="grid-item">Item 1.1</div>
  <div class="grid-item">Item 1.2</div>
  <div class="grid-item">Item 1.3</div>
  <div class="grid-item">Item 2.1</div>
  <div class="grid-item">Item 2.2<br>foo</div>
  <div class="grid-item">Item 2.3<br>foo</div>
  <div class="grid-item">Item 2.4</div>
  <div class="grid-item">Item 2.5</div>
  <div class="grid-item">Item 3.1</div>
  <div class="grid-item">Item 3.2</div>
</div>

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