subgrid不是自动对齐捷径，而是需显式声明grid-template-columns: subgrid或grid-template-rows: subgrid的受限继承机制；仅对直接子元素生效，依赖父容器明确定义轨道，命名线以父级为准，嵌套三层时孙子对齐中间层而非顶层。
subgrid 不是“自动对齐”的捷径，而是必须显式声明、严格受限的轨道继承机制——表单里用错一行代码，标签和冒号就全错位。
subgrid 必须写 grid-template-columns: subgrid，不能只靠 display: grid
很多人给表单项容器加了 display: grid 就以为能“顺带”复用父网格列线，结果所有子元素都按默认 1fr 排布，完全不跟父级对齐。subgrid 不是 display 的副作用，它是个独立声明值。
-
grid-template-columns: subgrid和grid-template-rows: subgrid是两个独立开关，只开一个时，另一方向仍需明确定义（比如grid-template-rows: 1fr），否则子网格可能坍缩成单行 - 父容器若只用
grid-auto-columns或grid-auto-flow，没有显式定义grid-template-columns，那根本没“轨道”可继承，subgrid会 fallback 成none - 浏览器开发者工具里检查 computed 样式，确认
grid-template-columns确实解析为subgrid，而不是空值或none
命名线（named lines）以父级定义为准，子元素同名线会被忽略
表单中常靠命名线对齐标签、冒号、输入框，比如父级设了 grid-template-columns: [label] max-content [colon] auto [input] 1fr。这时子网格哪怕也写 [label] subgrid，实际生效的仍是父级定义的 label 线位置。
- 子元素内使用
grid-column: label / colon，对齐的是父级轨道线，不是自己声明的同名线 - 子元素无法覆盖或重定义父级命名线；试图在子网格里重复定义
[label]会被静默丢弃 - 调试时打开 Chrome/Firefox 的 Grid Inspector，勾选 “Show line names”，一眼就能看出哪些线来自父级、哪些没生效
三层嵌套时 subgrid 失效：孙子元素对齐的是中间层，不是顶层
复杂表单常有字段组（.field-group）包裹多个 .form-row，再包具体控件。如果 .field-group 是 subgrid，.form-row 又设 grid-template-columns: subgrid，那它的子元素对齐的是 .field-group 的轨道，而非最外层表单容器。
立即学习“前端免费学习笔记（深入）”；
- 中间层若加了
gap: 8px，会插入隐式轨道，导致孙子的列索引整体偏移 - 中间层用了
grid-column: span 2或塞了空<div></div>，也会破坏轨道连续性 - 没有
subgrid: subgrid这种递归语法；想让孙子对齐顶层，唯一路径是：顶层 → 中间层（subgrid + 零干扰）→ 孙子（subgrid）
真正难处理的从来不是怎么写 subgrid，而是维护轨道连续性——gap、空文本节点、span 跨度、甚至 display: contents 都可能悄悄打断继承链。表单越复杂，越要先画出轨道草图，再逐层验证 computed 样式里的 grid-template-columns 是否真为 subgrid。
