CSS grid lanes 怎样实现不等高卡片的紧凑布局

不等高卡片用普通 CSS Grid 排列时，常见结果是每一行被最高卡片“撑高”，短卡片下面留下明显空白。CSS Grid Level 3 提供的 grid lanes（常被称为 masonry）把一个轴保持为规则网格，另一个轴按可用空间紧凑堆叠，正好针对这个问题。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_lanes

实用结论：原生 grid lanes 目前仍属于实验能力，生产页面应先保证普通 Grid 或多列布局可用，再用特性检测启用紧凑排列。

先理解 grid lanes 解决了哪一段空白

普通 Grid 同时管理行和列，行轨道通常会被该行最高的项目决定高度；卡片高低差越大，空白越明显。grid lanes 则让一个轴使用严格的网格轨道，另一个轴使用“放入当前最有空间的 lane”的堆叠算法，所以不等高项目能够更紧密地填充。

.cards {
  /* 列是规则网格，行方向交给 grid lanes 紧凑排列 */
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.card {
  /* 内容自然决定卡片高度，不用写死统一高度 */
  padding: 16px;
  border: 1px solid #d8dee9;
  border-radius: 12px;
  background: #ffffff;
}

这里的关键不是把卡片强行拉成同高，而是把列轨道交给 grid-template-columns，让行方向按卡片真实高度寻找空位。repeat(auto-fill, minmax(180px, 1fr)) 负责响应式列数，gap 负责两轴间距。

用 @supports 做渐进增强

MDN 将 grid lanes 标为 Limited availability 和 Experimental，不能把它当成所有目标浏览器都具备的基础能力。更稳妥的写法是先给普通 Grid 回退，再只在浏览器识别目标声明时覆盖布局模式。

.gallery {
  /* 基础回退：任何支持 Grid 的浏览器都能看到可用卡片 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

@supports (display: grid-lanes) {
  .gallery {
    /* 支持 grid lanes 时，减少不等高卡片之间的行空白 */
    display: grid-lanes;
  }
}

@supports not (display: grid-lanes) {
  .gallery {
    /* 不支持时保留普通 Grid，不让布局依赖实验语法 */
    display: grid;
  }
}

@supports 的作用是判断声明是否能被解析，不是判断视觉结果是否完全一致。因此回退样式必须本身可用，不能只写一个空壳。对于内容型图片墙，也可以考虑多列布局；对于需要稳定二维轨道的卡片，则保留普通 Grid 更容易理解和维护。

顺序、跨度和生产边界怎么处理

先看 DOM 顺序。紧凑排列会改变项目的视觉位置，键盘焦点和读屏顺序仍应以合理的 DOM 顺序为基础。不要为了填补视觉空洞而用脚本重排内容，也不要把视觉顺序当成语义顺序。

需要跨列时再使用跨度。grid lanes 仍可在网格轴上使用 grid-column-end: span 2 之类的定位，但跨度会改变可用 lane 的分配。只有确实需要强调某张卡片时才使用，不要让每张卡片都依赖手工坐标。

不要把旧语法当成稳定标准。一些资料会出现 grid-template-rows: masonry 等早期实验写法。当前方向是 grid lanes，具体实现仍需以目标浏览器和规范进展为准；如果 Baseline 目标未覆盖，就保持回退并把原生能力视作增强。

先选布局目标，再选技术。不等高、需要紧凑填充的卡片适合评估 grid lanes；文档碎片式的内容流可考虑多列；需要严格行列对齐的仪表盘卡片则继续使用普通 Grid。

相关问题

grid lanes 和普通 Grid 最大区别是什么？

普通 Grid 同时建立严格的行列轨道；grid lanes 只在一个轴上保持规则轨道，另一个轴按可用空间堆叠不等高项目，因此更容易减少行间空白。

现在可以直接上线 grid lanes 吗？

不建议把它作为唯一布局路径。先写普通 Grid 或多列回退，再用 @supports (display: grid-lanes) 渐进增强，并根据项目的 Baseline 目标决定是否启用。

为什么不直接用 JavaScript 瀑布流库？

如果只是布局填充，优先让浏览器布局引擎完成，代码更少；当项目需要复杂拖拽、虚拟列表或旧浏览器统一表现时，再单独评估脚本方案。