CSS subgrid 何时比重复定义 grid 更合适

做一组“标题—正文—按钮”高度不一的卡片时，最容易遇到的不是列数不会写，而是每张卡片内部的线对不上：第一张卡的按钮在某条线，第二张卡却因为标题更长向下挪了。每个卡片再写一份 grid-template-columns 只能复制尺寸，不能让嵌套内容真正参与同一套轨道。需要跨层对齐时，subgrid 通常比重复定义 grid 更合适；如果组件必须独立排版，普通嵌套 grid 反而更清楚。

CSS subgrid 解决的是哪种对齐问题

普通嵌套 grid 会建立一套独立轨道。父级可能是“固定信息列 + 弹性内容列”，子卡片却重新写成 1fr 2fr；当容器宽度、文本长度或间距改变，两套轨道就会出现细小偏差。CSS Grid Level 2 对 subgrid 的定义正是让嵌套网格采用父网格的一部分轨道尺寸。

关键是子组件仍要先成为父网格的 grid item，并明确自己跨了哪些轨道。它不是全局坐标系，也不会让任意后代跳过中间容器直接占据祖先网格。

最小写法：先让卡片跨入父网格，再继承列轨道

下面的父布局把卡片放在三列中，卡片内部不再猜测列宽，而是声明 grid-template-columns: subgrid。示例中的中文注释只解释关键边界，便于直接改成项目里的类名。

.cards {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 96px;
  gap: 16px;
}

.card {
  display: grid;
  grid-column: 1 / -1; /* 先跨入父网格的三条列轨道 */
  grid-template-columns: subgrid; /* 子内容沿用父级列宽 */
  align-items: start;
}

.card__title { grid-column: 1; }
.card__body { grid-column: 2; }
.card__action { grid-column: 3; }

这里的收益不只是少写一行 CSS。父布局调整第一列宽度时，所有卡片里的标题、正文和操作区都会跟着同一条网格线移动。若只需要行高对齐，就把继承写在 grid-template-rows；两者都要对齐时可以同时使用双轴 subgrid。

列、行和 gap 的边界要分开判断

表单经常适合只继承列：标签列和输入列要统一，但每一行的高度应由自己的内容决定。相反，多张信息卡的标题、摘要和底部操作区需要保持纵向节奏时，才考虑继承行。不要因为看到“嵌套”就默认双轴都使用 subgrid。

.form-row {
  display: grid;
  grid-column: 1 / -1; /* 每行占据父表单的标签列和输入列 */
  grid-template-columns: subgrid; /* 标签与输入沿父级列线对齐 */
}

.card {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid; /* 只有父级已提供合适的行轨道时才继承 */
}

.card__body {
  min-width: 0; /* 长文本不把弹性内容列撑出容器 */
}

父级的 gap 会默认传入子网格；如果卡片内部需要更紧的行距，可以明确写 row-gap: 8px。另一个常见坑是双轴 subgrid 不会凭空创建足够的隐式行，自动放置的内容超过父级已提供的行时，布局可能和预想不同。此时要么减少继承的轴，要么用 grid-auto-rows 为独立行提供尺寸。

重复定义 grid 与 subgrid 怎么选

判断标准可以压缩成一句话：轨道的责任属于父布局，还是属于组件自身？父布局负责整页对齐，组件只负责把内容放到这些线里，选 subgrid；组件需要在不同容器中完全自洽、轨道数量也不受父级约束，选普通 grid。

兼容处理：把 subgrid 当作增强层

MDN 将 subgrid 标为 Baseline Widely available，并说明主流浏览器已具备较好的覆盖；但项目仍要看自己的目标矩阵和内嵌 WebView。CSS 对不支持的属性值会将整条声明视为无效，所以不要只留下唯一的 subgrid 声明。

.card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 96px; /* 基础环境的可用布局 */
}

@supports (grid-template-columns: subgrid) {
  .card {
    grid-column: 1 / -1; /* 支持时接入父级列轨道 */
    grid-template-columns: subgrid;
  }
}

回退布局不必复制所有增强效果，先保证信息顺序、可读宽度和操作入口可用。上线前用目标浏览器检查三件事：子组件是否真的跨入父轨道、长标题是否把弹性列撑破、双轴自动放置是否超出父级行数。

相关问题

subgrid 能不能直接替代所有嵌套 grid？

不能。它要求子元素处在父网格上下文中，并且确实需要共享父级轨道；独立组件使用普通 grid 更容易理解。

为什么写了 subgrid 还是没有对齐？

先查子元素是否是父网格的 grid item、是否明确跨入目标轨道，再查继承的是列还是行。只写 display: grid 不会自动启用 subgrid。

父级 gap 一定会覆盖子级间距吗？

不会。父级的 gap 默认传入子网格，但子网格可以用 gap、row-gap 或 column-gap 覆盖。