subgrid继承父网格的轨道定义（列线、行线位置与命名）和gap值，不继承盒模型属性（margin/padding/border/width）、对齐控制或其他子项占位信息；三层嵌套时，孙子层subgrid仅对齐直接父层轨道，非顶层。
subgrid 并不继承父级网格的“盒模型”，它继承的是父网格的轨道定义（track definitions）——即列线（column lines）和行线（row lines）的位置与命名，而不是 margin/padding/border/width 这类盒模型属性。这是最常见的概念混淆点。
为什么写了 grid-template-columns: subgrid 却没对齐父网格？
grid-template-columns: subgrid 却没对齐父网格？这不是浏览器 bug，而是 subgrid 生效前提被破坏了：
- 父容器没写
grid-template-columns（只用了grid-auto-columns或repeat(auto-fit, ...)），这些生成的是隐式轨道，subgrid无法引用 - 子元素不是父网格的直接 DOM 子节点（中间夹了
div、display: contents或其他布局容器） - 子元素虽然设了
display: grid，但漏写了grid-template-columns: subgrid—— 仅靠display: grid不会触发子网格行为 -
grid-template-columns: subgrid 1fr这类混写会被浏览器整条丢弃，subgrid必须独占该声明
检查是否生效，最可靠的方式是打开 Chrome 或 Firefox DevTools 的 Grid 面板，勾选 “Show line names”，确认显示的列线名来自父容器（如 [start] 1 [col1] 2 [col2] 3 [end]），而非子容器自定义的名称。
subgrid 继承的是什么？不是什么？
subgrid 继承的是什么？不是什么？subgrid 继承的只有两样东西：
- 父网格显式定义的轨道数量、尺寸单位（
1fr、minmax(200px, 1fr)等）和命名线（如[content-start]） - 父网格的
gap值（子网格会自动应用相同间隙）
它不继承：
- 父元素的
width、padding、border、margin—— 这些仍由子元素自身盒模型决定 - 父网格中其他子项的
grid-column占位信息（比如某卡片占了span 2，不会影响子网格轨道） - 父网格的
justify-items或align-content等对齐控制（子网格需单独设置）
换句话说：subgrid 解决的是“线在哪”，不是“框多大”或“内容怎么放”。
三层嵌套时，孙子元素写 grid-template-rows: subgrid 对齐谁？
grid-template-rows: subgrid 对齐谁？它对齐的是**直接父层（第二层）的行轨道**，不是最外层原始定义。这意味着：
- 如果中间层只是普通
display: grid且未声明grid-template-rows: subgrid，那它的轨道是独立生成的，孙子层继承的就是这个“二手轨道” - 中间层若加了
gap、grid-auto-rows或grid-row: span 2，会插入隐式轨道，导致孙子层映射错位 - 没有
subgrid: subgrid或inherit跨级穿透语法；想让孙子对齐顶层，必须中间层也设grid-template-rows: subgrid，且禁用所有干扰操作
真正容易被忽略的细节是：子网格的“继承”本质是坐标系委托，不是样式继承。一旦中间层轨道不稳定（比如用 auto-fit 动态生成），整个链就不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
