subgrid：让嵌套网格对齐到父级的同一组线
把一个网格项自己也设成网格，默认它会新建一套独立轨道——于是并排的多张卡片，各自内部的标题 / 正文 / 按钮按自身内容排布，跨卡对不齐（标题行高随文字长短不一）。grid-template-rows: subgrid（或
columns）让子网格放弃自定义轨道，转而采用父网格在该跨度内的轨道线。这样所有卡片的「标题行 / 正文行 / 按钮行」都落在父网格的同一组行线上，天然对齐。
用法两步： 其一，子项先用 grid-row: 1 / 4 之类占据父网格的多条线；其二，在子项上写 grid-template-rows: subgrid，声明「这段跨度内不另立轨道，沿用父级的」。列向同理用 grid-template-columns: subgrid。
1 · 三张卡片：切换 subgrid ↔ 独立轨道
三张卡标题长短不同。独立轨道下每张卡自管三行，按钮行的纵向位置因正文高度各异而错位；切到 subgrid，三行统一由父网格定义，按钮行跨卡对齐。下方实测三个按钮的顶边 y 是否一致。
2 · subgrid 的两个要点
| 方面 | 说明 |
|---|---|
| 轨道来源 | 子网格在该轴不定义自己的轨道尺寸，逐条采用父网格在其跨度内的轨道线。 |
| gap 继承 | 默认继承父网格的 gap；子网格可用自己的 gap 覆盖该轴间距。 |
| 命名线继承 | 父级该跨度内的命名线在子网格中可见，子网格也可追加自己的命名线。 |
| 可单轴 | grid-template-columns: subgrid 与 -rows: subgrid 互相独立，可只继承一轴。 |
subgrid 之前怎么办？ 在 subgrid 普及前，跨容器对齐只能靠两招：其一，把中间包裹层 display: contents 抹掉、让真正的内容直接成为父网格的项（见
display: contents）；其二，干脆用固定轨道尺寸凑齐（脆弱，内容一变就错位）——即 「subgrid 之前只能靠固定轨道凑」 的老问题。实战页把这几种解法放在同一个例子里对照。