现代 CSS 布局：Grid、Subgrid 与 masonry

CSS 布局的演进，是把「过去需要 JS 或 hack 才能实现」的效果逐步变成声明式能力。本文聚焦 Grid 家族的三项关键能力。

Grid：二维布局的基石

Grid 让「行列同时布局」成为可能，grid-template-columns 配合 fr 单位能优雅地分配空间：

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

auto-fill + minmax 能实现自适应的卡片网格，无需媒体查询。

Subgrid：让嵌套对齐

Grid 的痛点是嵌套网格无法与父网格对齐。Subgrid 让子元素继承父网格的轨道：

.card {
  display: grid;
  grid-template-rows: subgrid; /* 继承父级行轨道 */
}

这样卡片里的标题、内容、按钮能跨卡片对齐，是设计系统里梦寐以求的能力。

原生 Masonry 瀑布流

瀑布流布局（Pinterest 式）过去要靠 JS 计算。CSS 正在提供原生的 masonry 能力：

.masonry {
  display: grid;
  grid-template-rows: masonry;
}

虽然规范仍在演进、浏览器支持渐进推进，但方向已明确：瀑布流终将成为纯 CSS 能力。

实践建议

• 首选 Grid 做整体布局，Flexbox 做单轴对齐；
• 用 Subgrid 解决卡片对齐的经典痛点；
• 对瀑布流，先用 columns 或 JS 方案，关注原生支持进展。

结语

现代 CSS 布局已足够强大，强大到许多 JS 布局库失去了存在的必要。先查查 CSS 能不能做，再决定是否引入脚本。