前言
前端开发一直有一个老大难的问题，那就是------瀑布流布局。
效果需求并不复杂：卡片错落，参差有致，看起来高级，滚动起来流畅。
就是这样一个看似简单的效果，其实已经困扰了前端开发者好多年。
要引入 JavaScript 库，要让内容智能填充，要实现响应式布局，写无数个媒体查询，要实现无限滚动加载，要用 JavaScript 处理复杂的布局逻辑......
现在，经过 Mozilla、苹果 WebKit 团队、CSS 工作组和所有浏览器的多轮讨论，它终于有了终极解决方案！
这就是 CSS Grid Lanes。
且让我们先翻译它为"CSS 网格车道"吧。
之所以叫车道，想象一下高速公路：有好几条车道，车辆会自动选择最短的那条车道排队。
CSS Grid Lanes 就是这个原理------你先定义好有几条"车道"（列），网页内容会自动填充到最短的那一列，就像车辆自动选择最不拥堵的车道一样。
具体使用起来也很简单，三行代码就能实现：
css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}实现原理
现在，让我们来细致讲解下如何实现开头图中的瀑布流效果。
首先是 HTML 代码：
html
<main class="container">
<figure><img src="photo-1.jpg" /></figure>
<figure><img src="photo-2.jpg" /></figure>
<figure><img src="photo-3.jpg" /></figure>
<!-- etc -->
</main>然后是 CSS 代码：
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 来处理布局。
功能强大
不同车道尺寸
Grid Lanes 充分利用了 CSS Grid 的强大功能 grid-template-*来定义车道，所以很容易创建出富有创意的布局。
例如，我们可以创建一个布局，其中窄列和宽列交替出现------即使列数随视口大小而变化，第一列和最后一列也始终是窄列。
实现也很简单：
css
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);效果如下：
跨车道
由于我们拥有网格布局的全部功能，我们当然也可以跨越车道。
效果如下：
实现代码：
css
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;
}
}放置项目
我们也可以在使用网格车道时显式地放置项目。这时，无论有多少列，标题始终位于最后一列。
实现代码为：
css
main {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
}
header {
grid-column: -3 / -1;
}改变方向
网格车道也可以双向排列！
上面的所有示例创建的是"瀑布式"布局，内容以列的形式排列。
网格车道也可以用于创建另一种方向的布局，即"砖块式"布局。
当使用 grid-template-columns定义列时，浏览器会自动创建瀑布式布局，如下所示：
css
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr 1fr;
}如果你想要反方向的砖块布局，使用 grid-template-rows：
css
.container {
display: grid-lanes;
grid-template-rows: 1fr 1fr 1fr;
}容差
"容差"是为 Grid Lanes 创建的一个新概念。它允许你调整布局算法在决定放置项目位置时的精确度。
回到高速公路的比喻：
假设 1 号车道前面的车比 2 号车道长了 1 厘米，下一辆车要排到哪条车道？
如果严格按"哪条短选哪条"，它会选 2 号车道。但 1 厘米的差距根本不重要！这样来回切换车道反而让人困惑。
"容差"就是告诉系统："差距小于这个值，就当作一样长"。
容差默认值是 1em（大约一个字的高度）。
为什么容差很重要呢？
因为用键盘 Tab 键浏览网页的人（比如视障用户）会按内容顺序跳转。
如果布局乱跳，他们会很迷惑。合适的容差能让浏览体验更流畅。
现在能用吗？
目前可以在 Safari 技术预览版 234 中体验，其他浏览器还在开发中。
苹果 WebKit 团队从 2022 年中就开始实现这个功能，现在基本语法已经稳定了。虽然还有些细节在讨论（比如属性命名），但核心用法不会变。
你可以访问 webkit.org/demos/grid3 看各种实际例子。
最后
欢迎围观我的"网页版朋友圈"，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。