grid-template-rows: subgrid没效果，是因为父容器未显式定义grid-template-rows（如auto 1fr auto），而仅用gap、grid-auto-rows或repeat(auto-fit)等隐式方式，导致无轨道可继承，浏览器静默丢弃声明并显示为none。
为什么 grid-template-rows: subgrid 在表单里没效果
写了但标签和输入框还是错位？大概率是父容器根本没定义显式行轨道。Subgrid 不继承 grid-auto-rows、不响应 gap 插入的隐式行，只认你亲手写的 grid-template-rows。浏览器看到没模板，就直接把 subgrid 当成无效值丢弃，computed 样式里显示为 none。
常见失效组合：
- 父容器只设了
display: grid; gap: 12px;—— 没grid-template-rows，无轨道可继 - 父容器用
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr))—— 这是列函数，对行无效，且仍是隐式生成 - 子元素被包在
div class="field-wrapper"里，而该 wrapper 没设display: grid—— 它不是父网格的直接子项
怎样让 label 和 input 真正锚定到同一行
关键不是“让它们看起来对齐”，而是让它们物理上落在父网格的同一套行坐标里。这需要三层配合：父定义轨道 → 子启用 subgrid → 子元素显式指定行线。
正确写法示例（精简核心）：
.form-grid {
display: grid;
grid-template-rows: auto 1fr auto; /* 三行：label / input / hint */
gap: 8px;
}
<p>.form-field {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /<em> 关键：继承上面三行 </em>/
}</p><p>.form-field label {
grid-row: 1; /<em> 强制贴顶行 </em>/
}</p><p>.form-field input,
.form-field select {
grid-row: 2; /<em> 所有输入控件统一钉在中间行 </em>/
}</p><p>.form-field .hint {
grid-row: 3; /<em> 提示统一落底行 </em>/
}</p>
注意点：
-
grid-row: span 3必须写，否则子网格默认只占一行，subgrid失去上下文 - 子元素不用写高度或
align-self，行高由父auto或1fr自动撑开 - 如果某个字段没有
.hint，它那一行依然存在，只是空着——这是对齐的前提
命名线（named lines）怎么用才不冲突
表单里常靠 [label]、[input] 这类命名线对齐，但子网格不能重定义同名线，只能消费父级已声明的。
父容器应这样定义：
.form-grid {
grid-template-rows: [label] auto [input] 1fr [hint] auto;
}
子元素直接引用，无需重复声明：
.form-field label { grid-row: label; }
.form-field input { grid-row: input; }
.form-field .hint { grid-row: hint; }
常见错误：
- 在子网格里也写
grid-template-rows: [label] auto [input] 1fr—— 父级线会被覆盖，子定义静默丢弃 - 子元素写
grid-row: label / input跨行 —— 会占满两行，破坏其他字段的垂直节奏 - 调试时没开浏览器 Grid Inspector 的 “Show line names” 选项，看不出哪条线来自父级
嵌套三层时对齐突然失效怎么办
比如 .form-grid → .field-group → .form-field，你会发现 .form-field 的 input 对不齐最外层的第二行。这不是 bug，是机制限制：subgrid 只作用于**直接子元素**，孙子对齐的是中间层（.field-group）的轨道，而非顶层。
要穿透三层，必须确保中间层“零干扰”：
-
.field-group必须设display: grid且grid-template-rows: subgrid -
.field-group不能加gap，否则插入隐式轨道，导致行索引整体偏移 -
.field-group不能有空子元素或grid-row: span 2的项，否则破坏轨道连续性 - 所有层级都必须使用相同语义的命名线（如统一用
[input]），不可在中间层改名
真正难处理的从来不是怎么写 subgrid，而是维护从顶层到底层的轨道连续性——一个 gap、一次 span、甚至一段换行符，都可能让对齐悄悄偏移一像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
