Subgrid 是专用嵌套对齐机制，仅继承父级显式定义的轨道，需通过 grid-template-columns/rows: subgrid 显式启用，且只作用于直系子元素；父容器必须设 display: grid 并明确定义轨道，否则静默退化。
Subgrid 不是普通 Grid 的升级版，而是解决特定嵌套对齐问题的专用机制——它不创建新轨道，只继承父级已定义的轨道。
subgrid 必须显式声明 grid-template-columns: subgrid，不能靠 display: grid 自动触发
很多人给子容器加了 display: grid 就以为能“自动复用”父网格列线，结果所有子元素按默认 1fr 排布，完全错位。Subgrid 是 grid-template-columns 或 grid-template-rows 的取值之一，不是 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
subgrid 只作用于直系子元素，且依赖父容器明确定义轨道
Subgrid 不是递归机制，也不穿透层级。它只对父容器的直接子元素生效，且父容器必须同时满足两个硬性条件：已设 display: grid，并显式定义了 grid-template-columns 或 grid-template-rows。
- 漏掉任一条件，浏览器会静默忽略
subgrid，退化为普通块级流或默认网格行为 - 三层嵌套时（如表单中
.form-group→.field-row→.input），孙子元素对齐的是中间层轨道，不是顶层；想让孙子对齐顶层，中间层必须是subgrid且不能插入空节点、gap或隐式轨道 -
grid-template-areas在嵌套中天然失效，因为区域命名不穿透层级；subgrid 的替代思路是放弃区域名，改用轨道继承 + 显式grid-column跨列
命名线以父级定义为准，子元素同名线会被静默丢弃
表单对齐常依赖命名线（如 [label] max-content [colon] auto [input] 1fr），但子网格里重复声明同名线毫无意义——浏览器只认父级定义的位置。
立即学习“前端免费学习笔记（深入）”；
- 子元素无法覆盖或重定义父级命名线；试图在子网格里写
[label] subgrid，实际生效的仍是父级的label线位置 - 调试时打开 Chrome/Firefox 的 Grid Inspector，勾选 “Show line names”，一眼就能看出哪些线来自父级、哪些没生效
- 中间层用了
gap、空文本节点、或未控制span跨度，都会破坏轨道连续性，导致孙子元素列索引整体偏移
真正难处理的从来不是怎么写 subgrid，而是维护轨道连续性——它对 HTML 结构和 CSS 声明顺序极其敏感，一个没注意到的空格或换行符都可能让继承中断。
