CSS subgrid 为什么能让嵌套卡片对齐同一列轨道

做卡片列表时，最容易出现一种细小但顽固的错位：每张卡片都有标题、描述和按钮，卡片内部也用了 Grid，可是不同卡片的按钮列并不在同一条竖线上。原因不是 1fr 计算错了，而是普通嵌套网格有自己的轨道定义。要让嵌套卡片真正对齐父网格，应让卡片在需要的轴上使用 subgrid，把父级已经算好的轨道继续传给卡片内容。

一句话判断：父级负责定义可共享的列或行，卡片用 grid-template-columns: subgrid 或 grid-template-rows: subgrid 接入，并通过自身跨越的范围决定继承多少条轨道。

先看清 nested grid 为什么会失去父级轨道

父容器设置 display: grid 后，只有直接子元素成为父网格项目。卡片内部再设置 display: grid，默认得到的是另一套独立轨道。即使两边都写了 repeat(3, 1fr)，可用宽度、内容最小尺寸和间距也可能不同，所以标题、正文和按钮的列边界会逐卡片漂移。

先把布局责任分开更容易排查：

用 subgrid 把嵌套卡片接回父网格

下面的例子让每张卡片跨越父网格的三列，但卡片内部不再重新定义列宽。grid-template-columns: subgrid 表示“采用当前卡片所跨父级列的轨道”。卡片内部项目使用的列线，会从卡片自己的第 1 条线重新编号，组件移动到父网格其他位置时仍然容易复用。

.card-list {
  /* 父级统一决定图标、内容和操作区的列轨道 */
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) max-content;
  gap: 16px;
}

.card {
  /* 卡片跨过父级三列，并把这三列接入内部网格 */
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
}

.card__icon { grid-column: 1; }
.card__body { grid-column: 2; }
.card__action {
  /* 操作区稳定落在父级第三列 */
  grid-column: 3;
}

这里最关键的不是把卡片写成三列，而是让卡片的占位范围先确定，再由 subgrid 继承对应轨道。若卡片只跨父网格的第 2 到第 3 列，它的子网格也只会拥有那一段，而不会看到父级全部列。

列和行要不要一起交给 subgrid

subgrid 是按轴选择的。只想让多个卡片的图标、内容和操作区左右对齐时，只设置列即可；卡片标题、价格、按钮还要在上下方向形成共同基线时，再考虑行：

.card {
  /* 横向沿用父级列，纵向保留卡片自己的行定义 */
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr auto;
}

.card--aligned {
  /* 只有父级确实定义了共享行，才同时继承两条轴 */
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

双向子网格的边界是：子网格在对应方向不会凭空新增隐式轨道。如果内容数量超过父级提供的轨道，自动放置结果可能挤到最后一条轨道。因此，不确定项目数量的列表通常只对子网格化的轴做约束，另一个方向用明确的 grid-auto-rows 或普通网格。

处理 gap、命名线和兼容边界

父网格的 gap、row-gap 和 column-gap 默认会传入子网格；这能保持卡片内容和外层列间距一致。如果卡片内部确实需要更紧的行距，可以在卡片上覆盖 row-gap，但要意识到它会改变内容与共享轨道之间的视觉间隔。

当布局跨多个组件层级时，给父级轨道命名比记数字更稳：

.card-list {
  /* 命名线随 subgrid 传入，便于表达业务区域 */
  grid-template-columns:
    [icon-start] 72px
    [content-start] minmax(0, 1fr)
    [action-start] max-content [list-end];
}

.card__action {
  /* 直接用父级传入的语义线放置操作区 */
  grid-column: action-start / list-end;
}

采用前先确认目标浏览器的 Grid Level 2 支持情况，并保留普通嵌套网格作为降级方案。降级时优先保证内容顺序和可读性，不要把关键按钮依赖在精确像素对齐上。

相关问题：subgrid 实战中怎么判断

subgrid 会不会继承父网格的全部列？

不会。它只继承子网格项目在父级中实际跨越的那一段轨道，内部线号也从子网格的起点重新计算。

可以只继承列而不继承行吗？

可以。分别设置 grid-template-columns: subgrid 或 grid-template-rows: subgrid，按真正需要共享的方向使用。

为什么设置后间距看起来变大了？

父级的 gap 默认会进入子网格。检查子网格的 gap、row-gap 和边框内边距，再决定是否覆盖。

MDN 的 Subgrid 指南和 W3C 的 CSS Grid Layout Module Level 2都把它定义为参与父级轨道尺寸和对齐的嵌套网格。实际改造时，先确定共享轴，再缩小子网格的跨越范围，通常比用 margin 逐张卡片修正更容易维护。