CSS 新特性！瀑布流布局的终极解决方案

1. 前言

前端开发一直有一个老大难的问题，那就是——瀑布流布局。

效果需求并不复杂：卡片错落，参差有致，看起来高级，滚动起来流畅。

就是这样一个看似简单的效果，其实已经困扰了前端开发者好多年。

要引入 JavaScript 库，要让内容智能填充，要实现响应式布局，写无数个媒体查询，要实现无限滚动加载，要用 JavaScript 处理复杂的布局逻辑……

现在，经过 Mozilla、苹果 WebKit 团队、CSS 工作组和所有浏览器的多轮讨论，它终于有了终极解决方案！

这就是CSS Grid Lanes。

且让我们先翻译它为“CSS 网格车道”吧。

之所以叫车道，想象一下高速公路：有好几条车道，车辆会自动选择最短的那条车道排队。

CSS Grid Lanes 就是这个原理——你先定义好有几条“车道”（列），网页内容会自动填充到最短的那一列，就像车辆自动选择最不拥堵的车道一样。

具体使用起来也很简单，三行代码就能实现：

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

2. 实现原理

现在，让我们来细致讲解下如何实现开头图中的瀑布流效果。

首先是 HTML 代码：

<mainclass="container"><figure><imgsrc="photo-1.jpg"/></figure><figure><imgsrc="photo-2.jpg"/></figure><figure><imgsrc="photo-3.jpg"/></figure><!-- etc --></main>

然后是 CSS 代码：

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

代码一共 3 行。

display: grid-lanes创建网格容器，使用瀑布流布局。

grid-template-columns创建车道，我们将值设为repeat(auto-fill, minmax(250px, 1fr))，意思是至少 250 像素宽的灵活列。浏览器决定创建多少列，并填充所有可用空间。

gap: 16px表示车道之间有 16px 的间歇。

就是这么简单。

3 行 CSS 代码，无需任何媒体查询或容器查询，我们就创建了一个适用于所有屏幕尺寸的灵活布局。

更绝的是，这种布局能让用户通过 Tab 键在各个栏目之间切换，访问所有当前可见的内容（而不是像以前那样，先滚动到第一列底部，然后再返回第二列顶部）。

它也支持你实现无限循环加载，随着用户滚动页面，内容无限加载，而无需使用 JavaScript 来处理布局。

3. 功能强大

3.1. 不同车道尺寸

Grid Lanes 充分利用了 CSS Grid 的强大功能grid-template-*来定义车道，所以很容易创建出富有创意的布局。

例如，我们可以创建一个布局，其中窄列和宽列交替出现——即使列数随视口大小而变化，第一列和最后一列也始终是窄列。

实现也很简单：

grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)minmax(16rem,2fr))minmax(8rem,1fr);

效果如下：

3.2. 跨车道

由于我们拥有网格布局的全部功能，我们当然也可以跨越车道。

效果如下：

实现代码：

main{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(20ch,1fr));gap:2lh;}article{grid-column:span 1;}@media(1250px < width){article:nth-child(1){grid-column:span 4;}article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6), article:nth-child(7), article:nth-child(8){grid-column:span 2;}}

3.3. 放置项目

我们也可以在使用网格车道时显式地放置项目。这时，无论有多少列，标题始终位于最后一列。

实现代码为：

main{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(24ch,1fr));}header{grid-column:-3 / -1;}

4. 改变方向

网格车道也可以双向排列！

上面的所有示例创建的是“瀑布式”布局，内容以列的形式排列。

网格车道也可以用于创建另一种方向的布局，即“砖块式”布局。

当使用grid-template-columns定义列时，浏览器会自动创建瀑布式布局，如下所示：

.container{display:grid-lanes;grid-template-columns:1fr 1fr 1fr 1fr;}

如果你想要反方向的砖块布局，使用grid-template-rows：

.container{display:grid-lanes;grid-template-rows:1fr 1fr 1fr;}

5. 容差

“容差”是为 Grid Lanes 创建的一个新概念。它允许你调整布局算法在决定放置项目位置时的精确度。

回到高速公路的比喻：

假设 1 号车道前面的车比 2 号车道长了 1 厘米，下一辆车要排到哪条车道？

如果严格按“哪条短选哪条”，它会选 2 号车道。但 1 厘米的差距根本不重要！这样来回切换车道反而让人困惑。

“容差”就是告诉系统：“差距小于这个值，就当作一样长”。

容差默认值是 1em（大约一个字的高度）。

为什么容差很重要呢？

因为用键盘 Tab 键浏览网页的人（比如视障用户）会按内容顺序跳转。

如果布局乱跳，他们会很迷惑。合适的容差能让浏览体验更流畅。

6. 现在能用吗？

目前可以在 Safari 技术预览版 234 中体验，其他浏览器还在开发中。

苹果 WebKit 团队从 2022 年中就开始实现这个功能，现在基本语法已经稳定了。虽然还有些细节在讨论（比如属性命名），但核心用法不会变。

你可以访问 webkit.org/demos/grid3 看各种实际例子。

7. 最后

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。