subgrid继承父网格显式轨道而非盒模型尺寸，需父容器明确定义grid-template-columns/rows、子元素为直接子项且声明grid-template-columns: subgrid及grid-column等定位；混用subgrid与具体尺寸值会导致整条规则失效。
subgrid 不继承盒模型尺寸，它继承的是父网格的轨道（track）定义——即列宽/行高的计算逻辑，而非最终渲染像素值。 这一点常被误解为“自动同步宽度”，实际是轨道结构复用，尺寸仍由内容、约束和父级显式声明共同决定。
为什么写了 grid-template-columns: subgrid 却没对齐父列？
最常见原因是父容器没提供可继承的显式轨道。subgrid 只能绑定到 grid-template-columns 或 grid-template-rows 中明确定义的轨道，不认 grid-auto-columns、repeat(auto-fit, ...) 或仅靠 gap 推导出的隐式轨道。
- ✅ 有效父声明：
grid-template-columns: 1fr 2fr 1fr或grid-template-columns: 200px 1fr auto - ❌ 无效父声明：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))、grid-auto-columns: 1fr、gap: 1rem单独存在 - 子元素必须是父网格的直接 DOM 子节点，中间插
display: contents、flex容器或 wrapper div 都会断开轨道映射
grid-column: span 2 为什么是必需的？
subgrid 自身不决定占位范围；它只接管轨道尺寸。若不显式用 grid-column 或 grid-row 指定子元素在父网格中的位置，浏览器会按默认 grid-column: auto 分配——通常只占 1 列，导致后续列错位、轨道链断裂。
- 父有 3 列 → 子要跨满，写
grid-column: 1 / -1或grid-column: span 3 - 若只写
grid-template-columns: subgrid而漏掉grid-column，子网格退化为单列普通 grid，视觉上可能“看起来差不多”，但 computed 样式里grid-template-columns已变成none - Chrome/Firefox DevTools 的 Grid 面板中勾选 “Show line names”，若显示的是父层定义的线名（如
1 / 2），说明 subgrid 生效；若显示子层自定义名或空白，说明未绑定
混用 subgrid 和具体尺寸值会静默失效
CSS 解析器对 grid-template-columns 声明是全有或全无：只要其中包含 subgrid 关键字，整条规则就不能再混入任何长度值（如 1fr、200px），否则整条规则被丢弃，回退到 none。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
grid-template-columns: subgrid 1fr、grid-template-columns: subgrid auto - ✅ 正确：
grid-template-columns: subgrid（全继承） 或grid-template-columns: 1fr 2fr 1fr（全重写） - 折中方案：只继承一个方向，比如
grid-template-columns: subgrid，再单独设grid-template-rows: 100px auto 1fr—— 行列可独立控制
真正容易被忽略的是：subgrid 生效后，子网格内元素的对齐依赖于父轨道的稳定性。如果父级用 minmax() 或响应式 auto-fit 动态生成列数，子层的 subgrid 就无法可靠映射——它需要父轨道在布局计算时已确定数量与顺序，而不是运行时推导。
