如何使用CSS Grid实现可自定义列宽的瀑布流卡片布局

问题原因 #

你当前的Grid代码默认按行排列元素，每一行的高度由该行最高的元素决定，所以短卡片下方会出现空白，无法实现你要的纵向紧密堆叠效果。

可行方案 #

方案1：拆分列容器（兼容性最好，实现最简单，推荐生产环境使用）

直接把属于不同列的卡片分别放到两个独立的列容器中，Grid仅负责控制两列的宽度，列内部的元素正常纵向堆叠，完全不受另一列高度影响。
修改后的代码如下：

HTML

<body>
<main>
  <!-- 左列 占60%宽度 -->
  <div class="col-left">
    <section class="A">
      <h3>Header 1</h3>
      <p>Short text</p>
    </section>
    <section class="C">
      <h3>Header 3</h3>
      <p>Some text. Lorem ipsum dolor sit amet.</p>
    </section>
  </div>
  <!-- 右列 占40%宽度 -->
  <div class="col-right">
    <section class="B">
      <h3>Header 2</h3>
      <p>Some Very long and boring text that lasts over a few lines.</p>
    </section>
  </div>
</main>
</body>

CSS

body {
  margin: 10px;
  width: 500px;
}

main {
  display: grid;
  grid-template-columns: 60% 40%;
}

.col-left, .col-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px;
}

section {
  border: 1px solid black;
}

方案2：原生Grid瀑布流特性（无需修改HTML结构，兼容性一般）

可以使用CSS Grid新增的grid-template-rows: masonry特性直接实现瀑布流，不需要调整HTML结构，仅需修改Grid配置即可，元素会自动填充到高度最小的列中：

main {
  display: grid;
  grid-template-columns: 60% 40%;
  /* 开启瀑布流布局 */
  grid-template-rows: masonry;
  align-tracks: start;
  /* 控制卡片间距 */
  gap: 10px;
  padding: 0 10px;
}

section {
  margin: 0;
  border: 1px solid black;
}

注意该特性目前属于较新的CSS规范，主流浏览器中仅Firefox默认支持，Chromium内核浏览器需要手动开启实验性特性方可使用，适合面向内部场景、对兼容性要求不高的项目使用。

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