❌

普通视图

发现新文章，点击刷新页面。
今天 — 2026年1月8日掘金 前端

🚀 从重复 CRUD 到工程化封装：我是如何设计 useTableList 统一列表逻辑的

✇掘金 前端
作者 basestone
2026年1月8日 17:29
本文基于真实业务场景，围绕 Hooks 与组件封装展开，完整记录了从需求拆解、设计思路到最终落地的全过程。文章重点介绍了如何抽象通用能力、设计合理的 API、规避常见的 Hooks 使用误区，并给出了

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

✇掘金 前端
作者 冴羽
2026年1月8日 17:11

前言

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

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

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

要引入 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;
}

实现原理

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

首先是 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 代码：

.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-*来定义车道，所以很容易创建出富有创意的布局。

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

实现也很简单：

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

效果如下：

跨车道

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

效果如下：

实现代码：

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;
  }
}

放置项目

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

实现代码为：

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

改变方向

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

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

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

当使用 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;
}

容差

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

回到高速公路的比喻：

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

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

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

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

为什么容差很重要呢？

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

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

现在能用吗？

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

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

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

最后

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

微信AI小程序“亿元计划”来了！你的APP如何一键接入，抢先变现？

✇掘金 前端
作者 FinClip
2026年1月8日 16:00

随着AI浪潮席卷而来，微信小程序再次抢跑，推出“AI应用及线上工具小程序成长计划”，为开发者送上云开发资源、AI算力与商业化支持“大礼包”。AI应用的验证与迭代，正越来越依赖轻量、易传播、社交属性强的载体。

而小程序，恰恰成为这一轮创新浪潮中最重要的试验田与放大器。

用FinClip，把微信AI生态“装进”你的APP

对于已经在APP中投入大量研发与运营资源的企业而言，如何快速融入小程序生态、抓住AI带来的用户增长与体验升级机遇？

凡泰极客旗下FinClip超级应用智能平台，帮助企业无缝对接微信小程序生态。

通过FinClip，企业可将海量微信小程序直接运行在自有APP中，无需重复开发，即可引入AI互动、智能工具、内容服务等多元场景，快速构建“超级APP”能力，降本增效的同时，大幅提升用户活跃与留存。

如果你正关注AI与小程序的结合机遇，希望在自己的产品中快速落地智能应用、拓宽服务场景，不妨通过下方长图进一步了解FinClip如何助你一步接入小程序生态，抓住这一波技术红利。

企微码：APP内运行小程序.jpg

❌
❌