CSS subgrid 如何让嵌套卡片对齐：grid-template-rows、subgrid 与回退布局

商品卡片一多，最先露怯的通常不是颜色，而是按钮上下不齐：有的标题两行，有的描述三行，卡片内部各自用 Grid 时，外层看起来像一排没收口的抽屉。CSS subgrid 的价值就在这里——让嵌套卡片沿用父级的行轨道，标题、描述和操作区可以共享同一套高度计算。

把卡片设成父网格的子网格后，子元素参与父级轨道尺寸计算；浏览器不支持 subgrid 时，再用独立的 Grid 作为可接受的降级方案。

为什么普通卡片 Grid 总会出现按钮错位

先把问题缩小到一个常见结构：外层是三列商品卡片，每张卡片里面都有标题、描述和按钮。卡片本身各自写 grid-template-rows: auto 1fr auto，看起来合理，但每张卡的 1fr 只在自己的卡片里分配空间，外层并不知道这些内部行应该互相对齐。

结果是第一张卡的描述被拉长，第二张卡的按钮提前出现。给每张卡设置固定高度只能遮住一个屏幕尺寸的问题，文字换行或移动端单列布局一变，间隙还会回来。

让卡片共享父级的三条行轨道

先让商品列表成为 Grid，并明确三条行：标题用 auto，描述用 1fr，操作区再用 auto。每个卡片跨过这三行，卡片内部再声明 subgrid，这样标题和描述的内容尺寸会回到父网格参与计算。

.product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.product-card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  padding: 1rem;
}

.product-card__title { grid-row: 1; }
.product-card__description { grid-row: 2; }
.product-card__action { grid-row: 3; }

这里的关键不是 subgrid 这一个单词，而是 grid-row: span 3。它告诉浏览器当前卡片要覆盖父级的三条轨道；如果只占一行，子网格就没有足够的父级范围可以继承。完成共享后，三列卡片的最终结果就是按钮对齐。

用 @supports 留住不支持 subgrid 的浏览器

回退写法不必复制整套组件。先让卡片使用独立 Grid，再在支持 subgrid 的环境里覆盖行定义：

.product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

@supports (grid-template-rows: subgrid) {
  .product-card {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

测试时不要只看桌面三列。打开浏览器的响应式模式，分别检查标题变成三行、描述为空、按钮文字换行和列表变成单列时的高度。如果布局包含 contain 或绝对定位，还要确认它没有让元素脱离父网格的尺寸计算范围。

三个容易误判的边界

父网格没有明确行时怎么办

没有明确的父级行，浏览器会生成隐式轨道，尺寸来源就不再像示例一样直观。先在 DevTools 的 Grid overlay 中确认卡片实际跨了哪几行，再决定是否需要补上 grid-template-rows。

为什么加了 subgrid 仍然不齐

检查卡片是否真的 grid-row: span 3，再检查子元素有没有被额外的 min-height、长单词或图片固有尺寸撑开。subgrid 负责共享轨道，不会替你消除内容本身的最小尺寸。

什么时候不值得引入 subgrid

如果卡片只有一个标题和一个按钮，或者每张卡本来就允许独立高度，单独 Grid 更容易读。subgrid 适合“重复组件需要跨卡片对齐”的场景，不是所有嵌套布局的默认答案。

相关问题

subgrid 能同时继承行和列吗

可以，分别在 grid-template-rows 和 grid-template-columns 使用 subgrid；只需要一个方向对齐时，只继承那个方向即可。

subgrid 会自动让所有卡片等高吗

它让共享轨道参与父级尺寸计算，但图片、长单词和最小尺寸仍会影响高度。等高应当是内容和轨道共同计算的结果。

如何确认浏览器支持 subgrid

可以在 CSS 中用 @supports (grid-template-rows: subgrid) 做能力判断，并在开发者工具里查看计算后的 Grid 轨道。

把修复收束成一个可维护的选择

这次对齐问题的修复边界很清楚：父网格定义结构，卡片声明跨行，子元素绑定到三条真实轨道；兼容层只负责让旧环境保持可用。先用内容最复杂的卡片验证，再覆盖窄屏和异常长文案，通常比给每张卡补固定高度更稳。