深入浅出 CSS：利用 CSS Grid 布局实现复杂的瀑布流设计

一、背景：为什么瀑布流这么难？

传统的瀑布流布局通常需要 JavaScript 计算每个元素的高度和位置（如 Masonry.js）。

挑战：

• DOM 顺序：如何保证内容流向从上到下、从左到右，而不产生巨大的空隙？
• 性能：频繁的 JS 计算会导致滚动卡顿。
• 响应式：当屏幕尺寸变化时，重新排列所有元素。

二、方案一：CSS Grid + grid-row-end (主流推荐)

目前最常用的 CSS 方案是利用 Grid 的行跨度。

1. 核心思路

将父容器设为 Grid 布局，并将行高设得很小（例如 10px）。然后根据每个子元素的高度，计算它需要跨越多少行。

.masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px; /* 定义一个很小的基准行高 */
}

.item {
  grid-row-end: span 15; /* 代表跨越 15 个基准行 */
}

2. 实战案例

<div class="masonry-container">
  <div class="item" style="grid-row-end: span 25">Card 1</div>
  <div class="item" style="grid-row-end: span 35">Card 2</div>
  <div class="item" style="grid-row-end: span 18">Card 3</div>
</div>

三、方案二：CSS Grid Level 3 (未来趋势)

CSS Grid 规范正在引入原生的 masonry 布局。

核心语法

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry; /* 直接开启瀑布流模式 */
}

目前情况：

• Firefox (启用配置后) 和 Safari 技术预览版已开始实验性支持。
• 虽然尚未在所有浏览器普及，但这是未来的标准做法。

四、方案三：CSS Columns (快速方案)

如果对性能要求不高，且不介意垂直方向的排列顺序：

.masonry {
  column-count: 3;
  column-gap: 1em;
}

.item {
  display: inline-block;
  width: 100%;
  margin-bottom: 1em;
}

缺点： 它是先填满第一列，再填第二列。如果第一列特别长，用户需要往下滑很久才能看到原本应该在第一行的第二个元素。

五、总结

如果你现在就要用，建议采用 方案一（Grid + span）。如果你在做前瞻性的技术选型，不妨关注 方案二（Native Masonry）。

你更倾向于哪种方案？欢迎在评论区留言！