嵌套 css grid 无法对齐父级网格的根本原因是 subgrid 必须显式继承父容器的显式轨道，且子元素必须是父网格的直接子项、正确声明 grid-row/column 范围，中间层不能引入隐式轨道或破坏 dom 层级。
嵌套 CSS Grid 无法对齐父级网格，不是子元素“不听话”，而是它根本没被允许参与父网格的轨道系统——display: grid 自身不等于“继承对齐”，必须显式打通轨道链。
父容器没定义显式轨道，subgrid 就是废语法
写了 grid-template-rows: subgrid 却没效果？先看父容器的 computed 样式里 grid-template-rows 是不是 none。如果是，说明整条声明被浏览器静默丢弃了。
- ✅ 允许 subgrid 继承：
grid-template-rows: auto 1fr auto、grid-template-columns: 200px 1fr 200px、grid-template-rows: repeat(3, minmax(100px, auto)) - ❌ subgrid 直接失效：
grid-auto-rows: 100px、grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))、gap: 12px（gap 会插入隐式轨道，切断映射） - 检查方式：在开发者工具中选中父容器 → Styles 面板 → 找
grid-template-rows→ 看 computed 值是否为具体轨道列表，而非none或空
子元素不是父网格的直接网格项
DOM 层级断了，轨道继承就断了。浏览器只认“直接子项”，不认“逻辑子项”。
- ✅ 有效结构：
<div class="parent"><div class="child-grid"></div></div>，且.child-grid在父网格中通过grid-column或grid-area显式定位 - ❌ 失效结构：
<div class="parent"><div style="display: contents"><div class="child-grid"></div></div></div>——display: contents不改变 DOM 层级，.child-grid仍不是直接子节点 - ❌ 同样失效：
<div class="parent"><div class="wrapper"><div class="child-grid"></div></div></div>，除非.wrapper本身参与父网格布局（如设grid-column: 1 / -1）
子网格缺 grid-row / grid-column 范围声明
grid-template-rows: subgrid 只是“申请继承权”，真正决定占几行几列的是 grid-row 和 grid-column。漏写它们，子网格默认只占单个网格单元，孙辈元素就会锚定到错误行线。
- 父设
grid-template-rows: auto 1fr auto（共 3 行，行线编号为 1/2/3/4） - 子必须写
grid-row: 1 / -1或grid-row: span 3，否则它只占第 1 行，后续孙辈用grid-row: 2就会落到隐式行里 - 常见现象：“标题和按钮看起来错位”，其实是孙辈元素被挤进了隐式轨道，不是样式写错了
三层嵌套时中间层污染了轨道链
Subgrid 不穿透。.list → .card → .content 这种结构里，.content 的 grid-template-rows: subgrid 对齐的是 .card 的轨道，不是 .list 的。想让 .content 对齐顶层，中间层 .card 必须干净。
- .card 必须同时设
grid-template-rows: subgrid且禁用gap、grid-auto-rows、grid-row: span 2等任何引入隐式轨道的操作 - .card 的
grid-template-rows必须是固定声明（如1fr 2fr 1fr），不能用minmax()或auto-fit动态生成 - 命名线冲突时，以顶层定义为准；父子同名区域线，子层声明会被忽略
真正卡住多数人的，不是语法记不住，而是误以为“设了 display: grid 就自动对齐”。Subgrid 是显式委托，不是隐式继承——每一条轨道链都得亲手接牢，少一个条件，整个对齐就塌掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
