Subgrid 仅在父容器明确定义显式轨道、子元素为直接子项且显式声明 grid-row/column 范围时生效；漏任一条件（如父用 repeat(auto-fit) 导致 computed 为 none、嵌套过深未逐层设 subgrid、或缺失 grid-row 声明）即失效。
Subgrid 不是“开了就能对齐”的开关，它只在父容器明确定义轨道、子元素是直接子项、且显式声明继承范围时才生效。漏掉任一条件，对齐就失效。
为什么写了 grid-template-columns: subgrid 却没对齐？
最常见原因是父容器根本没提供可继承的轨道。Subgrid 只继承 grid-template-rows 和 grid-template-columns 的显式定义，对隐式轨道（比如 grid-auto-rows、gap 插入的额外行、repeat(auto-fit, ...)）完全无视。
-
✅ 正确示例：父容器设grid-template-columns: 1fr 2fr 1fr，子元素写grid-template-columns: subgrid才有效 -
❌ 失效场景：父容器只写grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))—— 浏览器解析后computed grid-template-columns是none，subgrid 被静默丢弃 - 检查开发者工具的 computed 样式，如果
grid-template-rows或grid-template-columns显示为none，说明父容器轨道未被识别，subgrid 已退化
三层嵌套时，孙子元素为何对不齐顶层列线？
Subgrid 只作用于**直接子元素**。结构为 .list → .card → .content 时，.card 继承的是 .list 的轨道，而 .content 继承的只是 .card 的轨道——不是 .list 的。
- 想让
.content也对齐顶层，.card必须同时满足：display: grid+grid-template-rows: subgrid+grid-template-columns: subgrid -
.card禁止使用gap、grid-auto-rows、空<div></div>，任何引入隐式轨道的操作都会切断继承链 - 若
.card写了gap: 16px却没用grid-row: 1 / -1覆盖完整跨度，浏览器会自动插入隐式行，导致.content的grid-row: 2锚定到错误位置
子元素必须显式声明 grid-row 或 grid-column 范围
Subgrid 是继承轨道，不是自动铺满。子网格本身得告诉父网格：“我要占哪几行哪几列”，否则默认只占单个网格单元，孙辈元素就会掉进隐式轨道里。
- 父设
grid-template-rows: auto 1fr auto（共 3 行，行线编号为 1/2/3/4），子元素必须写grid-row: 1 / -1或grid-row: span 3 - 只写
grid-template-rows: subgrid不够，漏掉grid-row声明，孙辈用grid-row: 2会锚定到子网格自己的第 2 行（即隐式行），而非父网格的第 2 行 - 跨列推荐用
grid-column: 1 / -1而非grid-column: 1 / 4，避免父列数变动后断裂
真正卡住人的从来不是语法，而是 DOM 层级和轨道定义的“纯净性”——中间多一个 wrapper、父容器少一行 grid-template-rows、子元素漏一个 grid-row，对齐就断了。别猜，打开开发者工具看 computed 样式里的 grid-template-* 是否为 none，那是最准的诊断信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
