subgrid 不会自动继承父级轨道，必须显式声明 grid-template-rows: subgrid 或 grid-template-columns: subgrid，且仅对直接子元素生效；父容器需明确定义轨道，命名线以父级为准，嵌套三层时孙子对齐的是中间层而非顶层轨道。
Subgrid 不会自动继承父级轨道，必须显式声明 grid-template-rows: subgrid 或 grid-template-columns: subgrid，且只对直接子元素生效——这是最常被误用的核心前提。
subgrid 为什么写了却没对齐？
多数人以为加了 display: grid 就能“顺带”复用父轨道，其实完全不会。父容器的 grid-template-columns 和 grid-template-rows 默认不透传，子网格仍是独立坐标系。
- 必须写
grid-template-columns: subgrid（或rows），subgrid是关键字，不是值，不能带单位或函数 - 父容器必须已定义明确轨道，比如
grid-template-columns: 1fr 2fr 1fr；若只用grid-auto-columns，则无轨道可“子” - 只写一边（如仅列方向）时，另一方向仍需自行定义，否则子网格可能坍缩或行为异常
- 开发者工具里检查 computed 样式，确认
grid-template-columns确实解析为subgrid，而非 fallback 到none或空值
嵌套三层时 subgrid 失效的真相
subgrid 只作用于**直接子元素**。孙子元素再设 grid-template-columns: subgrid，它对齐的是中间层（第二层）的轨道，而非最外层原始轨道。
- 中间层若加了
gap: 1rem，会插入隐式轨道，破坏顶层轨道的连续性，导致孙子的subgrid映射错位 - 中间层若用
grid-row: span 2或手动插入额外行（如空<div></div>），同样会偏移轨道索引 - 没有
subgrid: subgrid这种递归语法，也不能用inherit或unset触发跨级继承 - 想让孙子对齐顶层，唯一可行路径是：父 → 中间层（
subgrid+ 零干扰）→ 孙子（subgrid）
命名线冲突：父与子同名 line 怎么办？
如果父网格定义了 grid-template-columns: [start] 1fr [content] 2fr [end]，而子网格也写 grid-template-columns: [content] subgrid，实际生效的是父定义的 content 线位置，子定义会被忽略。
-
subgrid模式下，所有命名线以父轨道定义为准，子元素无法覆盖或重定义同名线 - 子网格内使用
grid-column: content / end，实际对齐的是父的content和end，不是子自己声明的 - 若需局部调整，只能在子网格内部用
grid-column-start等显式偏移，但会脱离 subgrid 对齐初衷 - 调试时打开浏览器的 Grid Inspector（Chrome/Firefox 均支持），勾选“Show line names”，直观验证线是否来自父级
真正难处理的不是语法，而是轨道连续性的维护：gap、隐式行、span 跨度、甚至空文本节点，都可能悄悄插入新轨道，让 subgrid 的映射失效。别依赖“看起来对齐了”，得查 computed 值和 Inspector 中的轨道编号是否严格一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
