你以为瀑布流只能用 JS？Safari 26 今天把这件事用三行 CSS 彻底原生化了

做过图库、商品列表这类不等高卡片网格的前端工程师，应该都被瀑布流坑过。传统 CSS Grid 要求行和列同时固定——高度不一致的卡片塞进同一行，留下一堆难看的空白。之前的解法是 column-count 多列布局，但这个方案有三个致命问题：DOM 顺序被打乱、item 无法跨列、gap 行为诡异。

CSS Grid Lanes 换了一种思路。它只在一个轴上定义轨道，另一个轴让元素自由流入最短的可用通道。效果就是你熟悉的 Pinterest 风格——完全没有空白，浏览器原生算好每个元素该落在哪。

三行代码：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-template-rows: masonry;
  gap: 1rem;
}

就一行 grid-template-rows: masonry，替代了过去几十行 JS 或一整个库。Safari 26.4 正式支持，Chrome 140+ behind flag，Firefox 也在跟进。Interop 2026 把 masonry 列为重点推进项目，主流浏览器全部在跑。

它和 column-count 的核心区别：

• DOM 顺序完整保留，键盘 tab 顺序不会乱
• grid-column: span 2 跨列仍然有效
• gap 正常工作，不会像 column 那样出现跨列 gap 断裂
• 配合 repeat(auto-fill, minmax(...)) 实现真正响应式，一个媒体查询都不用写

进阶控制：

/* 允许轻微高度差换取更均衡的视觉分布 */
.gallery {
  grid-template-rows: masonry;
  masonry-slack: 8px; /* 默认 0，越大越容忍错位 */
}

渐进增强写法（生产可用）：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start; /* 防止卡片被拉伸填充行高 */
}

@supports (grid-template-rows: masonry) {
  .card-grid {
    grid-template-rows: masonry;
    align-items: unset;
  }
}

不支持的浏览器走普通 grid，有一定空白但功能完整；支持的浏览器自动获得无空白的瀑布流。

三个要注意的坑：

一是 accessibility——视觉顺序和 DOM 顺序可能不一致，用 order 属性调过的元素会影响 tab 键顺序，如果你的网格里有链接或按钮，需要额外做无障碍测试。

二是 Chrome/Firefox 目前还没 stable——Safari 26.4 是唯一 stable 通道，Chrome 要到 140+ stable 才默认开启，生产项目必须用 @supports 渐进增强。

三是 spec 仍在演进——早期实验用过 display: grid-lanes 关键字，现在统一为 grid-template-rows: masonry，两条路都能认，但建议用 masonry 更稳妥。

下一步：三件事

1. Chrome/Edge 打开 chrome://flags/#enable-css-grid-lanes 体验真实效果
2. 给现有瀑布流组件加一行 @supports 渐进增强
3. 记住这个 API——等 Chrome 140 stable 推送后可以直接上线

CSS Grid 这次从「固定轨道」进化到「有车道的河流」，瀑布流这个场景被它从根上接管了。