subgrid 有效需父容器明确定义 grid-template-rows，子元素须为直接子项、显式占满对应行数且自身设 display: grid 和 grid-template-rows: subgrid；否则被静默丢弃。
因为 subgrid 让 label、input、hint 这些元素物理上落在同一套父级行坐标里，不是靠视觉“看起来对齐”，而是共享真实轨道线。
父容器没写 grid-template-rows，subgrid 就是无效声明
浏览器对 subgrid 的处理非常严格：它只继承你亲手写的 grid-template-rows（比如 auto 1fr auto），不认 grid-auto-rows、不推导 gap 插入的隐式行、也不解析 repeat(auto-fit) 这类动态表达式。
- 打开 DevTools → Layout 面板 → 勾选 “Show line names”，如果父容器只有虚线（无实线轨道名），说明没定义有效模板
-
grid-template-rows: subgrid在子元素上写了但 computed 值是none，就是被静默丢弃了，不是 bug，是规范行为 - 常见错误组合：
display: grid; gap: 12px;—— 没有grid-template-rows，就无轨道可继
子元素必须是父网格的直接子项，且显式占满对应行数
subgrid 不穿透中间 wrapper。如果 label 和 input 被包在 <div class="field-wrapper"> 里，而这个 wrapper 没设 <code>display: grid，那它就不是父网格的直接子项，subgrid 根本不生效。
- 子容器必须写
grid-row: span 3（假设父定义了三行），否则默认只占一行，subgrid失去上下文 - 子容器自身要设
display: grid+grid-template-rows: subgrid，不能只靠父级样式透传 - 若用
display: contents包裹字段，DOM 子节点关系被破坏，subgrid同样失效
对齐靠的是行线编号或命名线，不是 align-self 或 margin-top: auto
一旦启用 subgrid，子元素的子元素（如 label、input）就能直接使用父级的行线编号（grid-row: 1）或命名线（grid-row: label）定位——这和父容器是否设置了 align-items 无关，也无需计算高度。
- 父容器定义
grid-template-rows: [label] auto [input] 1fr [hint] auto，子元素就能写grid-row: input - 某个字段没有
.hint，第三行依然存在，只是空着——这是跨字段对齐的前提 - 用
align-self: end或margin-top: auto只能控制单个字段内部，无法让多个字段的input落在同一视觉水平线上
真正难的不是写对那几行 CSS，而是理解 subgrid 是一个“坐标挂载”机制，不是自动对齐开关；它要求结构干净、轨道明确、层级扁平——任何一层加了 gap、用了 grid-auto-rows、或者偷偷插入了 wrapper，整条继承链就断了。
