要实现subgrid嵌套对齐，必须同时满足四点：父容器显式定义grid-template轨道；子元素为父网格直接子项；子网格声明display: grid且grid-template-*-lines设为subgrid；子网格及内部元素需用grid-row/column显式定位到父级轨道线。
要用 subgrid 实现嵌套网格与父级网格的对齐协同，核心不是“让子网格看起来对齐”，而是让子网格**物理上共享同一套轨道线**。这需要四点同时成立，缺一不可。
父容器必须显式定义轨道
subgrid 不继承隐式生成的轨道，只认你亲手写的 grid-template-columns 或 grid-template-rows。
- ✅ 正确：
.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 1fr auto; } - ❌ 错误：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))—— 浏览器无法在布局前确定列数，subgrid 失效 - ❌ 错误：
grid-auto-rows: 60px或仅靠gap—— 这些不产生可继承的轨道线
子元素必须是父网格的直接子项
DOM 层级不能中断。中间插一层 wrapper（哪怕设了 display: contents）都会断开 subgrid 的继承链。
- ❌ 无效结构：
<div class="parent"><div class="wrapper"><div class="child-grid"></div></div></div> - ✅ 正确写法：删掉
.wrapper，让.child-grid直接作为.parent的子元素，并用grid-column: 1 / -1或grid-row: 2 / 4明确占位范围
子网格自身要声明 subgrid 并设为 display: grid
subgrid 不是 display 值，也不是默认行为。它必须显式启用，且只能用于 grid 容器。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.child-grid { display: grid; grid-template-columns: subgrid; } - ✅ 可选组合：
grid-template-columns: subgrid; grid-template-rows: 1fr 2fr;（列继承，行自定义） - ❌ 错误：
display: subgrid（已废弃） - ❌ 错误：
grid-template-columns: subgrid 1fr（混写导致整条规则被浏览器忽略）
对齐要靠显式定位，不是自动发生
启用 subgrid 后，子网格内元素仍需用 grid-row 或 grid-column 指向父级轨道线，才能真正锚定。
- 例如表单中统一把 input 钉在第二行：
.input { grid-row: 2; } - 子网格本身通常需
grid-row: span N占满对应行数，否则默认只占一行，subgrid 缺少上下文 - 命名线（如
[label]）也可跨层使用，但前提是父级已定义，且中间层没破坏轨道连续性
