第十一章 · 11.3 节

Subgrid

6.4 节讲过，Grid 容器的子元素默认只是"占据"若干个网格单元，子元素内部再想用 Grid 布局，就是一套全新的、跟父网格无关的轨道系统。subgrid 让子网格可以直接"继承"父网格的行/列轨道，从而实现跨嵌套层级的对齐。

没有 subgrid 时的痛点

最常见的场景：一排卡片，每张卡片内部都有标题、正文、底部按钮，希望所有卡片的标题顶部对齐、按钮底部对齐——但每张卡片内容长度不同。如果每张卡片各自建立一套 Grid，它们的行高只能各自撑开，无法跨卡片对齐。

subgrid 语法

把子元素的 grid-template-columns（或 rows）设为 subgrid，它就不再定义自己的轨道尺寸，而是直接复用父网格对应范围内的轨道：

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
}

.card {
  grid-row: span 3;         /* 占据 3 行 */
  display: grid;
  grid-template-rows: subgrid; /* 复用父网格的 3 行轨道，而不是自己重新计算 */
}

卡片列表对齐示例

使用要点