Subgrid 并非通用嵌套对齐方案，仅在父容器显式定义轨道、子元素为直接子项且声明 display: grid 等严格条件下生效；常见失效原因包括父未设 grid-template-rows、子非直系、漏写 display: grid 或轨道由 auto-fit 动态生成。
Subgrid 不是用来“解决嵌套对齐问题”的通用方案——它只在极少数明确满足前提的场景下生效，多数人以为需要它的地方，其实根本没到用它的阶段。
为什么 grid-template-rows: subgrid 没效果
浏览器对 subgrid 的解析非常严格，写上就等于承诺满足全部硬性条件，缺一即静默失效。最常见失效原因：
- 父容器没写
grid-template-rows（只写了grid-auto-rows或靠auto-fit生成隐式轨道） - 子元素不是父网格的**直接子项**（中间有
display: contents、<div>wrapper 或 JS 动态插入层） - 子元素漏了
display: grid，只写了grid-template-rows: subgrid - 开发者工具里检查 computed 样式，
grid-template-rows显示为none而非subgrid，说明整条声明已被丢弃
父容器必须显式定义轨道，不能靠 auto-fit
subgrid 只继承显式模板，不继承任何由 repeat(auto-fit, ...)、minmax() 或 grid-auto-rows 动态生成的隐式轨道。例如：
❌ 无效：.parent { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); }
✅ 有效：.parent { grid-template-columns: 1fr 2fr 1fr; } 或 grid-template-rows: auto 1fr auto;
响应式需求不要在子元素上重写轨道——所有断点调整必须集中在父容器上，否则继承链断裂。
立即学习“前端免费学习笔记（深入）”；
子元素必须是真实直系子项，且带 grid-row/column 范围
DOM 层级和 CSS 布局层级必须一致。以下结构会让 subgrid 失效：
❌ 无效：<div class="parent-grid"><div style="display: contents"><div class="child-grid"></div></div></div>
✅ 有效：<div class="parent-grid"><div class="child-grid"></div></div>
同时，.child-grid 必须有明确的占位声明，比如 grid-column: 1 / -1 或 grid-row: 2 / 4，否则它可能被压缩成单行/单列，无法挂载到父轨道上。
真正影响对齐的，往往是 align-self 和轨道空间
即使 subgrid 生效了，你也可能看不到预期对齐效果——因为：
-
align-self: center在grid-template-rows: auto的轨道里无视觉表现（没高度可居中） - 父容器没设
height或min-height，导致子网格自身高度坍缩 - 同时写了
margin: auto和justify-self: end，前者会覆盖后者 - 想让孙子元素对齐顶层轨道？中间层也得是
subgrid，且不能加gap或空节点（它们会插入隐式轨道）
Subgrid 的作用域很窄：它只管“轨道线怎么复用”，不管“容器自己摆在哪”或“内容怎么撑开空间”。对齐失败时，先查 display: grid、height、align-self 和轨道定义是否齐全，再考虑 subgrid 是否真有必要。
