subgrid生效的前提是父容器显式定义grid-template-rows且子元素声明grid-row: span N；否则subgrid被忽略。需手动指定label、input等元素的grid-row以实现物理坐标对齐，命名线仅可在父级声明并由子级引用。
父容器没定义 grid-template-rows，subgrid 就是摆设
写了 grid-template-rows: subgrid 却完全没效果？打开开发者工具看 computed 样式，如果显示为 none，说明浏览器直接丢弃了该声明。根本原因是：Subgrid 不继承 grid-auto-rows、不响应 gap 插入的隐式行，它只认父容器**亲手写的显式行轨道**。
常见失效组合包括：
- 父容器只设了
display: grid; gap: 12px;—— 没grid-template-rows，无轨道可继 - 父容器用
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr))—— 这是列函数，对行无效，且仍是隐式生成 -
.form-field不是父网格的直接子元素，中间夹了fieldset或div且没设display: contents—— Subgrid 只作用于真实 DOM 子节点
grid-row: span 3 必须显式写，否则子网格只占一行
即使父容器定义了三行（比如 grid-template-rows: auto 1fr auto），子元素若不声明占据多少行，浏览器默认只给它分配一行空间，subgrid 就失去上下文，无法锚定到对应轨道。
正确做法是让每个表单项容器明确撑满父级行数：
- 父容器定义三行：
grid-template-rows: auto 1fr auto - 子容器（如
.form-field）必须加：grid-row: span 3 - 再启用继承：
grid-template-rows: subgrid
漏掉 grid-row: span 3 是最常被忽略的一步，它不是“可选优化”，而是 subgrid 能工作的前提。
label 和 input 必须显式指定 grid-row，不能靠默认流
Subgrid 的价值不在“看起来对齐”，而在“物理坐标对齐”——即所有字段的 label 都落在第 1 行线、所有 input 都钉在第 2 行线、所有 .hint 都在第 3 行线。这需要手动指定：
.form-field label { grid-row: 1; }.form-field input, .form-field select { grid-row: 2; }.form-field .hint { grid-row: 3; }
注意：即使某个字段没有 .hint，第 3 行依然存在。这是对齐稳定的根源——空行不塌缩，坐标不漂移。别试图用 margin-top: auto 或 align-self 替代，那会退化成 flex 思维，失去 subgrid 的确定性。
命名线（named lines）只能消费，不能重定义
想用 [label]、[input] 这类语义化命名线？可以，但必须在父容器中一次性声明，子网格里只能引用，不能重复定义同名线，否则会覆盖或冲突。
例如父容器写：grid-template-rows: [label] auto [input] 1fr [hint] auto;
子元素才能安全使用：grid-row: label; 或 grid-row: input;
如果在子元素里也写 grid-template-rows: [label] auto;，不仅无效，还可能破坏继承逻辑。命名线的本质是“坐标标签”，不是样式开关。
Subgrid 真正难的不是语法，而是思维切换：它要求你放弃“内容驱动高度”的直觉，转而信任显式轨道——哪怕某行为空，坐标也必须保留。一旦父级行轨道松动，整个对齐就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
