subgrid生效需父容器显式定义grid-template-rows/columns、子元素为真实直接子项且display: grid、子元素声明grid-template-rows: subgrid并配合grid-row定位；隐式轨道、dom中断或混用尺寸值均导致失效。
Subgrid 不是让子网格“自动对齐”，而是让子网格放弃自己定义轨道，直接复用父网格的行列坐标——对齐只是结果，继承才是本质。
为什么 grid-template-rows: subgrid 写了却没效果？
90% 的失效不是语法错，而是父级轨道没被真正“定义”：
- 父容器只写了
grid-auto-rows: 100px或gap: 1rem，但没声明grid-template-rows—— Subgrid 不继承隐式轨道，只认显式写的那一行 - 父容器用了
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，这种动态生成的列数没有固定轨道，subgrid会静默退化为none - 子元素不是父网格的**真实直接子节点**：中间夹了
display: contents、fieldset或空文本节点，DOM 层级断了，继承链就断了 - 开发者工具里检查 computed 样式，
grid-template-rows显示为none而非subgrid—— 说明该声明已被浏览器丢弃，不是没生效，是根本没进渲染引擎
subgrid 必须和 grid-column/grid-row 配合用
只写 grid-template-columns: subgrid 不会让内部元素自动对齐父列线；你还得明确告诉子网格项它该占哪几列：
- 子网格容器本身必须是父网格的一个完整项，比如
grid-column: 1 / -1（横跨全部列），否则它无法“接入”整套轨道体系 - 子网格内部的元素要对齐父列，得直接用父级命名线或数字线：
label { grid-column: 1; }、input { grid-column: 2; }，而不是靠justify-self或margin推 - 如果父级定义了命名轨道如
grid-template-rows: [label] auto [input] 1fr [hint] auto，子元素只能消费这些已有名字，不能重声明同名线：grid-template-rows: [label] subgrid是无效的
移动端表单对齐为什么比 flex 更稳？
因为 flex 的 align-items: baseline 依赖内容尺寸，而 subgrid 依赖父级显式轨道坐标：
-
flex下，label字体缩放、input的padding差异、甚至系统字号设置，都会导致基线漂移 -
subgrid中，哪怕某个字段没有.hint，父级定义的[hint]行依然存在，input被钉死在[input]行内，位置完全不受内容增减影响 - 响应式切换时，只需在父容器上改
grid-template-columns，子层保持grid-template-rows: subgrid不变即可，不会因媒体查询覆盖而切断继承
真正难的从来不是那行 subgrid 声明，而是确保父容器轨道固定、DOM 干净、中间不插任何“透传”容器——连一个看不见的换行符都可能让 subgrid 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
