Subgrid实现label与input垂直对齐需父容器显式定义grid-template-rows、子元素为直接子项且声明grid-row: span N；否则浏览器静默丢弃，computed样式中显示为none。
直接用 grid-template-rows: subgrid 能稳住 label 和 input 的垂直对齐，但前提是父容器必须显式定义行轨道，且子元素是直接子项、带 grid-row: span N —— 否则浏览器静默丢弃声明，computed 样式里 grid-template-rows 显示为 none。
父容器没写 grid-template-rows，subgrid 就是摆设
Subgrid 不继承 grid-auto-rows、不响应 gap 插入的隐式行，只认你亲手写的 grid-template-rows。常见失效组合：
- 父容器只设了
display: grid+gap: 12px—— 没模板，无轨道可继 - 父容器用
grid-template-rows: repeat(auto-fit, minmax(60px, 1fr))—— 这是列函数，对行无效，且仍是隐式生成 - 父容器写了
grid-template-rows: auto 1fr auto✅，子元素才能真正继承三行坐标
.form-field 必须是父网格的直接子元素
DOM 层级断了，subgrid 就断了。任何中间包装都会让继承失效：
-
-
.form-field不是真实子项，subgrid 不触发 -
.wrapper参与父网格布局（如加grid-column: 1 / -1）
子元素漏写 grid-row: span N，孙辈就锚错位置
grid-template-rows: subgrid 是继承指令，不是自动铺满。它需要明确告诉父网格：“我要占几行”。假设父设 grid-template-rows: auto 1fr auto（共 3 行 → 行线编号 1/2/3/4）：
- 必须写
grid-row: 1 / -1或grid-row: span 3，否则子网格默认只占单行 - 漏掉这句，
label设grid-row: 1会锚定到父第 1 行，但input设grid-row: 2却可能落在子网格的隐式第 2 行（即父第 2 行之下），视觉错位 - 哪怕某个字段没有
.hint，那一行轨道依然存在——这是对齐的前提，不是 bug
命名线用错，对齐就失效
父容器定义了 grid-template-rows: [label] auto [input] 1fr [hint] auto，子元素想用命名线定位，必须直接消费父级线名：
-
.form-field label { grid-row: label; }✅ 有效 -
.form-field { grid-template-rows: [label] subgrid; }❌ 静默失败 —— 子网格不能重定义同名线，只能读取父级已声明的 - Chrome DevTools Layout 面板勾选 “Show line names”，一眼看出哪些线来自父级、哪些未生效
真正难的不是写对那一行 grid-template-rows: subgrid，而是确保从父容器到子元素的 DOM 层级干净、轨道定义显式、媒体查询不干扰继承链——空文本节点、display: contents、甚至 fieldset 的默认样式，都可能悄悄打断这条链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
