最常见原因是父容器未显式定义grid-template-rows，仅用grid-auto-rows或gap生成隐式轨道，subgrid无法继承；且子元素必须是父网格的直接子节点，中间不能有display: contents或框架wrapper干扰。
grid-template-rows: subgrid 为什么没让 input 对齐？
最常见原因是父容器没写 grid-template-rows，只靠 grid-auto-rows 或 gap 撑开高度——subgrid 不继承隐式轨道，必须显式定义。比如父容器只设了 display: grid; gap: 12px;，子元素哪怕写了 grid-template-rows: subgrid，浏览器也会静默忽略，computed 样式里显示为 none。
另一个高频陷阱是子元素不是父网格的**直接子节点**：中间夹了 display: contents 容器、或被 Vue/React 的 wrapper 元素包裹，都会导致 subgrid 失效。检查 DOM 结构，确保表单组件（如 .form-item）是 .form-grid 的直系子元素。
表单项怎么用父行轨道精确定位？
父容器先定义语义化行轨道，例如三行分别对应 label、input、hint：
.form-grid {
display: grid;
grid-template-rows: auto minmax(40px, 1fr) auto;
gap: 8px;
}
子表单项启用 subgrid 并占满全部三行：
.form-item {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
内部子元素直接锚定父轨道线编号（无需计算像素）：
-
label固定在第 1 行：grid-row: 1 -
input或select锚定第 2 行：grid-row: 2 -
.hint放在第 3 行：grid-row: 3
这样即使某个表单项没有 hint，input 仍稳在第二行，不会被 label 挤下去。
响应式下 subgrid 怎么不崩？
subgrid 本身不响应，响应逻辑必须由父容器驱动。错误做法是在子项上写 @media 改自己的 grid-template-rows——这等于主动切断继承链。
正确方式只在父容器上做断点调整：
- 小屏（单列）：
@media (max-width: 767px) { .form-grid { grid-template-rows: auto 40px auto; } } - 大屏（双列）：
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }
注意：列方向改 grid-template-columns 不影响行 subgrid；但若在断点里把 grid-template-rows 换成 repeat(auto-fit, ...)，就会退化为隐式轨道，subgrid 失效。
兼容性与降级怎么写才不翻车？
Chrome 114+、Firefox 110+、Safari 16.4+ 原生支持，但旧版 Safari 和多数安卓 WebView 仍不支持。必须用 @supports 隔离：
@supports (display: grid) and (grid-template-rows: subgrid) {
.form-grid { grid-template-rows: auto minmax(40px, 1fr) auto; }
.form-item { grid-template-rows: subgrid; }
}
降级方案不是“模拟 subgrid”，而是回退到传统布局：父设 display: grid，子项取消 subgrid，改为手动设置 height 或用 align-items: flex-end + margin-top: auto 拉底——虽然不够精准，但至少不崩溃。
真正容易被忽略的是：subgrid 要求父轨道**稳定可数**。如果父容器用 minmax(200px, 1fr) 配合 auto-fit 定义列，子层的列 subgrid 就可能失效；而行方向只要固定行数（如三行），哪怕用 auto 和 1fr 混搭，也能可靠继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
