subgrid不会自动继承父级轨道，必须显式声明grid-template-columns: subgrid或grid-template-rows: subgrid；父容器需明确定义显式轨道，子元素须为直接网格项且自身设display: grid，否则退化为普通网格容器。
Subgrid 不会自动继承父级轨道，必须显式声明 grid-template-columns: subgrid 或 grid-template-rows: subgrid，否则它就是个普通 grid 容器。
为什么写了 display: grid 却没对齐父网格？
这是最常见误判：以为只要子元素设了 display: grid 就能“天然”复用父列线。其实 Subgrid 是显式委托机制，不是继承行为。
- 漏掉关键声明：
grid-template-columns: subgrid（或rows）——subgrid是关键字，不能省略，也不能写成display: subgrid（已废弃） - 父容器没定义显式轨道：比如只用了
grid-auto-columns: 1fr或repeat(auto-fit, minmax(300px, 1fr)))，这些不产生可被 subgrid 引用的轨道 - 子元素根本不是父网格的网格项：没用
grid-column、grid-row或grid-area定位，它只是 DOM 子节点，不是布局上下文中的网格项 - 父容器加了
gap，而子元素又没用grid-column: 1 / -1覆盖完整跨度，导致隐式轨道插入，切断映射链
三层嵌套时，孙子元素为何对不齐顶层网格？
Subgrid 只作用于直接子元素。孙子层的 grid-template-columns: subgrid 对齐的是中间层的轨道，不是顶层的原始定义。
- 中间层必须也设
grid-template-columns: subgrid（且不能只设一边），否则轨道链断裂 - 中间层禁止使用
gap、grid-auto-rows、grid-row: span 2等任何会引入隐式轨道的操作 - 中间层若用
minmax()或auto-fit动态生成轨道，孙子层无法稳定映射——顶层轨道必须是固定声明，如1fr 2fr 1fr - 命名线冲突时以父层为准：如果父子都定义了
[content]，子层的声明会被忽略，实际对齐位置由顶层决定
如何检测 Subgrid 是否真正生效？
别只看视觉效果，很多情况下失效后子网格会退化为普通 grid，但看起来“好像还行”，实则轨道已错位。
- 在 Chrome/Firefox DevTools 的 Grid 面板中勾选 “Show line names”，确认显示的列线名称来自父容器（而非子容器自定义）
- 检查 computed 样式：
grid-template-columns的值应明确解析为subgrid，而不是none或空字符串 - 用
@supports (grid-template-columns: subgrid)做检测时注意：Safari 16.3 及更早返回false，但 16.4 才真正可用；部分安卓 WebView 声称支持却行为异常 - 降级必须真实可用：比如先写
grid-column: span 3+display: grid; grid-template-columns: repeat(3, 1fr)，再用@supports覆盖为 subgrid 方案
真正难处理的不是语法，而是轨道连续性的维护——一个空格、一段换行符、一个未闭合的标签，都可能让 display: contents 或文本节点成为隐式网格项，破坏 subgrid 映射。这不是浏览器 bug，是规范设计使然：Subgrid 要求轨道链干净、明确、无干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
