你以为瀑布流只能靠 JS 库？今天 CSS Grid Lanes 把这件事彻底原生化了

写过前端的人都见过这种布局——Pinterest 的图片墙、Unsplash 的瀑布流、画廊网站的不规则网格。每张卡片高度不同，但排列起来严丝合缝，底下没有空白。

CSS Grid 做不到。传统 grid 布局严格对齐行，每行高度固定，短卡片下面必然留白。CSS columns 能填空白，但 items 从上往下排完一列再排下一列，顺序变成了纵向扫描，不是我想要的从左到右阅读顺序。

所以这个场景一直是 JS 库的天下。Masonry.js、isotope、Packery……装一个依赖，改一堆配置，完了。

CSS Grid Layout Module Level 3 定义的 grid-lanes，终于把这件事原生化了。

语法就两行：

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

行为变了：浏览器不再把 items 塞进固定行高，而是每个 item 都去找当前最”空”的 column 填进去，像 Pinterest 一样。高度不同的卡片自动左右咬合，底部没有空白。

flow-tolerance： 另一个新属性，控制 item 可以偏离原始顺序多远来保持 lane 均衡。默认值是 1em，调大则排列更紧凑但阅读顺序打乱，调小则接近原始顺序但留白增多。

跨列 item： 照用 grid-column: span 2，不受影响。

浏览器支持现状： Safari 26.4 / iOS Safari 26.4 是第一个稳定版。Chrome 和 Firefox 还需要开实验 flag。规范目前还是 Working Draft，标准未最终冻结。

渐进增强写法：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
@supports (display: grid-lanes) {
  .gallery {
    display: grid-lanes;
  }
}

不支持的浏览器渲染标准 grid（行对齐，有空白），支持的浏览器升级为 masonry。

一个已知坑： 视觉顺序和 DOM 顺序可能不一致，tab 键焦点顺序不等于视觉排列顺序，accessibility 测试要过一下。

下一步：如果你现在正好有个图片墙或者产品卡片要排，去 Can I Use 查一下 Safari 支持率，然后动手加 @supports。不用等所有浏览器都支持才用——瀑布流场景的 fallback（标准 grid 留白）本来就能用，不会更差。