CSS Grid Lanes:全新的原生瀑布流布局

你之前肯定构建过 Pinterest 风格的布局。你可能使用过 JavaScript 库、CSS 多列布局的技巧,或者通过计算行跨度实现复杂的 Grid 变通方案。每种方法都能工作,但没有一种感觉是原生的。

CSS Grid Level 3 正在探索在 Grid 中实现原生瀑布流风格的行为。目前的一个提案引入了 display: grid-lanes 作为该功能的可能语法——但在你重构生产代码之前,你需要了解 2026 年初的实际情况。

本文涵盖了 CSS Grid Lanes 背后的核心概念、它与传统 Grid 的区别、当前浏览器支持的实际情况,以及在采用它之前你应该考虑的因素。

CSS Grid Lanes 实际做了什么

传统的 CSS Grid 同时在两个轴上操作。你同时定义行和列,项目占据明确的单元格。这创建了可预测的矩形布局——但当项目高度不一致时,也会留下空隙。

CSS Grid Level 3 草案引入了瀑布流风格的行为,有时称为”grid lanes”,你在一个轴上定义轨道(通常是列),项目使用瀑布流算法在另一个轴上紧密堆叠。项目会流入具有最多可用空间的通道,自动填充空隙。

当前讨论中的草案语法如下所示:

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

然而,语法和行为仍在演进中。早期实验在 grid-template-rows 或 grid-template-columns 中使用了像 masonry 这样的值,一些引擎实现了这些方法的原型版本。CSS 工作组继续完善瀑布流如何集成到 Grid Level 3 中。请参阅 CSS Grid Layout Module Level 3 的最新草案。

Grid Lanes 与标准 Grid 的区别

使用 display: grid 时,项目同时遵守行和列轨道。较短的项目会在下方留下空白空间,直到下一行开始。

使用瀑布流风格的 Grid 行为时,只有一个轴有定义的轨道。另一个轴上的项目根据可用空间堆叠,而不是严格的行边界。这创建了瀑布流布局特有的交错外观。

大多数熟悉的 Grid 功能——例如定义列轨道和显式放置——在概念上仍然可用,但在功能处于实验阶段时,实现可能会有所不同。跨越和边缘情况放置等行为在各引擎之间尚未完全互操作。

瀑布流布局 vs. 砖块布局

使用 grid-template-columns 定义列,项目垂直流动——经典的瀑布流布局。使用 grid-template-rows 定义行(在实验性实现中),项目以砖块风格的模式水平流动。

流动行为和排序控制等细节仍在规范中讨论,并且可能在浏览器预览版之间有所不同。除非你在目标浏览器中验证了支持,否则避免依赖非标准或仅限草案的属性。

浏览器支持:现实情况

这是生产规划变得复杂的地方。

截至 2026 年初,CSS Grid 中的原生瀑布流行为在所有主流浏览器中仍处于实验阶段:

• Safari Technology Preview 拥有较为完整的原型实现之一。
• 基于 Chromium 的浏览器已经在标志后实验了与瀑布流相关的语法,包括早期的 masonry 轨道值。
• Firefox 已在配置标志后实现了瀑布流实验。

在撰写本文时,没有主流稳定浏览器渠道提供完全互操作的、无标志的支持。你可以通过 Can I use 和浏览器发布说明跟踪兼容性状态。

CSS 工作组继续完善 Grid Level 3 中的集成细节。

**实际要点:**在没有回退方案的情况下,不要将瀑布流风格的 Grid 语法发布到生产环境。

渐进增强策略

特性检测让你在支持的地方进行实验,同时优雅地回退:

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

@supports (display: grid-lanes) {
  .container {
    display: grid-lanes;
  }
}

不支持的浏览器会渲染标准的 Grid 布局。项目对齐到行而不是紧密堆叠——对于许多用例来说,这是一个可接受的基线。

由于语法在稳定之前可能会改变,将其视为渐进增强而不是长期的生产依赖。

无障碍性和源顺序问题

瀑布流布局引入了 DOM 与视觉顺序的问题。项目出现的位置由堆叠算法决定,而不是它们的源顺序。用户通过 Tab 键浏览内容时可能会在布局中不可预测地跳转。

这不是 Grid Lanes 独有的——这是瀑布流风格布局固有的问题。你应该彻底测试键盘导航,特别是对于阅读顺序重要的内容。

屏幕阅读器遵循 DOM 顺序,而不管视觉放置如何。确保你的 HTML 结构在线性阅读时有意义。

结论

对于实验、原型和渐进增强层,瀑布流风格的 Grid 行为现在值得探索。Grid Level 3 中的方向正在变得更加清晰,当浏览器支持成熟时,今天的实践经验会有所回报。

对于需要一致的跨浏览器行为的生产功能,请暂缓。在承诺之前,监控规范讨论和浏览器实现说明。

原生 CSS 瀑布流一直是一个长期存在的需求。它终于成形了——但还没有完全标准化或互操作。在广泛采用之前,验证浏览器支持是否符合你的要求。

常见问题

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..