CSS Grid Lanes：Safari 中的原生瀑布流布局

瀑布流布局，也就是那种错落有致、Pinterest 风格的网格——任意尺寸的项目流入可用空间——十多年来一直依靠 JavaScript 库、浮动和 Flexbox 技巧在生产环境中勉强支撑，这些技巧往往”差不多能用”，直到它们失灵为止。¹ 在 WWDC 2026 上，Apple 的 Safari 团队为 Web 带来了一种实现它的原生布局模式：CSS Grid Lanes。瀑布流这个模式由来已久，但用三行代码就能生成它的一等公民 CSS display 类型，外加一个修复瀑布流长期存在的 Tab 顺序与无障碍问题的 flow-tolerance 调节项，则是全新的。Grid Lanes 今天已可在 Safari 26.4 中使用，在其他浏览器中则需开启实验性标志。¹

TL;DR

• Grid Lanes 是一种介于 Grid 与 Flexbox 之间的全新 CSS 布局模式：它在一个轴上构建结构，让另一个轴保持自由，将内容分布到多个 lane 中，形成紧密排列、错落有致的布局，同时保留每个项目的天然比例。¹
• 整件事只需三行：display: grid-lanes、带 fr 轨道的 grid-template-columns，以及 gap。把 grid-template-columns 换成 grid-template-rows，就能把瀑布流翻转成砖墙式布局。你只能选一个方向，而非两个。¹
• 轨道尺寸的设定方式沿袭自 Grid：不等的 fr 比例、配合 minmax() 的 auto-fill 以实现响应式列数，以及窄宽交替的重复模式。¹
• 项目使用你已经熟悉的 Grid 属性：用 grid-column: span 2 加宽，显式列定位，以及用 grid-template-columns: subgrid 把卡片内容折叠进父级布局。你控制列的定位，而非行；行由 Grid Lanes 决定。¹
• flow-tolerance 是关键的差异化所在。纯粹的最短列放置会让 Tab 顺序相对视觉顺序来回曲折，损害无障碍性。flow-tolerance（默认 1em）放宽了最短列规则，使放置更贴合阅读顺序。¹
• 可用性如实相告：Safari 26.4 今天就支持它，其他浏览器则将其置于实验性标志之后。Grid Lanes 尚未实现跨浏览器正式发布。¹

Grid Lanes 介于 Grid 与 Flexbox 之间的位置

Safari 团队的 Brandon 从零开始构建一个 Grid Lanes 布局，从 3:39 开始。

每种布局模式都在回答相同的两个问题：项目放在哪里，以及它们获得多少空间。¹ Flexbox 和 Grid 的回答各不相同，而 Grid Lanes 恰好落在两者之间。

Flexbox 给你一个轴和一条沿其流动的单一项目 lane；当项目换行时，它们会继续沿所选方向（行或列）流动。¹ Grid 给你两个轴，即列和行，并把项目放入这些轨道交叉处的单元格中。当项目的宽高比各不相同时，问题就暴露出来：较矮的项目无法填满单元格，于是你会得到大片空白区域。¹ 对图片而言，这只留下三个糟糕的选项。把每张图片拉伸以填满单元格，会使其变形；放大以填充空间，图片会溢出其容器；裁剪它，则可能丢失重要信息。¹

Grid Lanes 化解了这种张力。正如这场演讲所言：”它介于 Grid 与 Flex 之间。它不像 Grid 那样跨两个维度构建结构，而是只构建一个维度，让另一个维度保持自由。但又不像 Flex 那样内容只在单条 lane 中流动并向下换行，Grid Lanes 将内容分布到多条 lane 中。”¹ 项目被逐个放置，每个项目都落入能让它最接近顶部的那一列，这就是为什么靠前的项目位置更高，靠后的项目从下方填补空缺。¹ 该布局适用于任何内容，而不仅仅是图片：文本块会换行以适应其所在列、由浏览器确定高度，而标题则可以跨列以脱颖而出。¹

三行 CSS 实现原生瀑布流

构建从一个全新的 display 类型开始，然后像 Grid 那样定义轨道：

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns 设定轨道的数量以及每条轨道的宽度。fr 单位（”fractional unit”，分数单位）告诉浏览器取容器中的可用空间并将其切分为若干份，于是 1fr 1fr 1fr 会生成三个等宽的列，而 gap 添加间距的方式与在 Grid 中完全一致。¹ 要把瀑布流翻转成砖墙式布局，把列换成行即可：将 grid-template-columns 替换为 grid-template-rows，项目就会沿行横向流动，而非沿列向下流动。唯一的限制，用这场演讲的话说：”你只能选一个方向——而非两个。”¹

这三行给予的控制力超出表面所见。列不必等宽：中间一列可以占据相邻列两倍的空间。你也无需自己固定列数，而可以让浏览器来决定，方式与响应式 Grid 布局早已采用的一样：

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

auto-fill 会创建尽可能多的能容纳下的列，而 minmax() 表示每一列至少 200 像素，但可以增长以填充空间。¹ 你可以把同样的思路再向前推一步，使用窄列与宽列交替的重复模式。Brandon 点出的回报是：”我最喜欢的，是仅用几行 CSS 就能做到这么多。”¹

用你熟悉的 Grid 属性塑造单个项目

Grid Lanes 用 Grid 中已存在的属性来塑造项目。从一个三等列的 grid-lanes 容器开始。要给某个项目更多空间，grid-column: span 2 会让它横跨两列，布局的其余部分会随之调整。¹ 你也可以精确放置某个项目：将它设为从第 2 列开始并横跨第 2、3 列。这个限制是有意为之的：”你可以控制列的定位，但不能控制行。行由 Grid Lanes 替你决定。”¹

subgrid 把嵌套组件的内容折叠进父级。一张横跨两列的食谱卡片包含一张图片和一些文本，默认情况下它们并不参与 Grid Lanes 布局。给卡片加上 display: grid-lanes 和 grid-template-columns: subgrid，于是”它的内容作为各自独立的项目加入父级布局”：图片占一列，文本占另一列，各自按其内容确定尺寸。¹ 嵌套可以朝任一方向进行——Grid Lanes 容器内嵌一个普通 grid，或者反过来——因为同样的工具和语法可以通用。¹

flow-tolerance 调节项：无障碍修复

这正是让 Grid Lanes 不只是更整洁的瀑布流的关键之处。纯粹的最短列放置在大多数时候看起来很棒，但有时它就是感觉不太对，而原因在于无障碍性。¹

设想一行中有两个高度几乎相同的项目，其中项目 2 比项目 1 矮几个像素。项目 2 下方的区域更靠近顶部，于是浏览器把下一个项目放到那里，而项目 4 填补了第一列。视觉结果是：第一行从左到右读，最后一行却从右到左读。正如这场演讲所说：”Tab 顺序与内容在视觉上的呈现方式之间的差异，会影响人们的无障碍体验，并可能造成令人困惑的体验。”¹ Tab 顺序遵循源代码顺序；曲折的视觉放置破坏了键盘和屏幕阅读器用户所依赖的对应关系。

flow-tolerance 就是放宽或收紧最短列规则的调节项。¹ 开启它后，浏览器对每个新项目都会问：”较高的那一列是否小于较短的那一列加上 flow-tolerance？”¹ 如果差距在容差范围内，项目就填入能让放置与阅读顺序保持一致的那一列；一旦差距大到无法忽视，项目就落入真正较短的那一列。默认值是 1em：

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

Apple 的建议是”尝试不同的 flow-tolerance 值，找到适合你内容的那一个”。¹ 赋予浏览器灵活性的另一面，是结果偶尔会让你意外，而当这种情况发生时，Web Inspector 对 Grid Lanes 提供了完整支持：打开叠加层，你就会看到列与行的辅助线、投射在每个项目之上的顺序编号（让你能清楚看到放置是如何发生的），以及在项目之间绘制出的间距。¹

关键要点

对前端开发者： - 用 display: grid-lanes、三个 fr 轨道和 gap 替换 JavaScript 瀑布流库和 Flexbox 技巧；复用你已经熟悉的 Grid 轨道尺寸工具（auto-fill、minmax()、不等的 fr）。¹ - 用 grid-column: span N 和显式列定位来突出重点项目，用 grid-template-columns: subgrid 把嵌套卡片的内容折叠进父级布局。¹

对注重无障碍的团队： - 调节 flow-tolerance（默认 1em），让视觉放置贴合源代码与 Tab 顺序，弥合曲折瀑布流放置为键盘和屏幕阅读器用户带来的落差。¹ - 用 Web Inspector 的 Grid Lanes 叠加层验证放置，它会把项目顺序编号直接投射在布局之上。¹

对规划推广的技术负责人： - 把 Grid Lanes 视为 Safari 26.4 可用、其他浏览器需开启标志、尚未跨浏览器正式发布的特性；将它作为渐进增强发布，并为仍处于标志之后的浏览器提供优雅降级。¹

FAQ

什么是 CSS Grid Lanes？

CSS Grid Lanes 是 Safari 团队在 WWDC 2026 上推出的一种全新布局模式，用于原生构建瀑布流风格的布局。它介于 Grid 与 Flexbox 之间：在一个轴上构建结构，让另一个轴保持自由，将项目分布到多条 lane 中，形成紧密排列、错落有致的布局，同时保留每个项目的天然比例。¹

如何用 Grid Lanes 构建瀑布流布局？

三行 CSS：设定 display: grid-lanes，用 fr 单位通过 grid-template-columns 定义轨道（例如 1fr 1fr 1fr 表示三个等宽列），再添加一个 gap。把 grid-template-columns 换成 grid-template-rows，就能把竖直的瀑布流变成水平的砖墙。你只能选一个方向，而非两个。¹

flow-tolerance 有什么用？

flow-tolerance 放宽或收紧把每个项目放入最短列的规则。纯粹的最短列放置会让视觉顺序相对 Tab 顺序来回曲折，从而损害无障碍性。开启 flow-tolerance 后，浏览器在决定放置前会先检查较高的列是否小于较短的列加上容差，从而让项目与阅读顺序保持一致，直到高度差距变得过大。默认值是 1em。¹

今天能在生产环境中使用 Grid Lanes 吗？

在 Safari 26.4 中现已可用。其他浏览器将它置于实验性标志之后，因此 Grid Lanes 尚未实现跨浏览器正式发布。请将它作为渐进增强发布，并为仍需开启标志的浏览器提供降级方案。¹

Grid Lanes 能配合我已经熟悉的 Grid 属性使用吗？

可以。项目级的定位使用现有的 Grid 属性：grid-column: span 2 加宽项目，显式列定位为其定位，grid-template-columns: subgrid 把嵌套组件的内容折叠进父级布局。你控制列的定位；行由 Grid Lanes 决定。¹

当你开始构建后想要一份动手参考，WebKit 在 gridlanes.webkit.org 维护着一份官方的 Grid Lanes 实战指南。专家组指出，Grid Lanes 可以与全新的可定制 select 组合使用：瀑布流布局可以在 ::picker(select) 下拉菜单内工作。²

Grid Lanes 正是那种删除依赖而非增添依赖的平台新增能力，这恰是免构建宣言的全部论点，也是通向Lighthouse 满分纪实中那种成果的直接路径。交付原生、语义化的布局而非由 JavaScript 渲染的网格，还能让你的标记对机器保持可读，这正是HTML 是 agent 想要的格式所阐述的观点。整个系列的中心页面是 Apple 生态系统系列。

参考资料