子网格不适用于多层表单，因其强制继承父轨道导致错位、兼容性差且无法应对动态内容；应改用每层独立 display: grid + 显式轨道定义，并注意盒模型与基线对齐。
子网格（subgrid）在多层表单中**不解决对齐问题，反而容易引发渲染失败或布局断裂**——它只适用于「子容器必须复用父容器轨道定义」的极少数场景，而表单恰恰不是其中之一。
为什么表单不该用 subgrid
子网格要求子元素直接继承父网格的行/列轨道，但表单字段（label、input、textarea）需要独立控制尺寸、换行逻辑和响应式行为。一旦父网格轨道随内容高度变化（比如长错误提示撑开某一行），所有 subgrid 子项都会被强制拉伸或错位。
-
subgrid在 Safari 16.4+ 和 Chrome 111+ 才稳定支持，Firefox 仍需前缀，IE 完全不支持 - 表单字段常含动态内容（如验证提示、多行文本），父网格无法预设足够轨道
- 你无法给
label单独设grid-row或grid-column——它会被父轨道强行约束，导致标签和控件错行
真正能对齐多层表单的方案是嵌套 display: grid
每层表单容器都独立声明 display: grid，靠显式轨道定义而非继承，才能保证字段组、子字段、控件三者各自可控。
- 外层表单容器用
grid-template-areas划分语义区块（如"name name" "email phone" "submit submit"） - 字段组（如地址块）自身设
display: grid+grid-template-columns: 1fr 1fr 1fr，控制省/市/区三列 - 单个字段内若需图标+输入框并排，用
display: flex而非子网格——subgrid无法处理这种微粒度混合布局 - 所有嵌套层必须设
box-sizing: border-box和min-width: 0，否则width: 100%在嵌套中会溢出
遇到「字段对不齐」时优先检查这三处
表单对齐问题几乎从不源于网格本身，而是样式穿透或盒模型干扰。
立即学习“前端免费学习笔记（深入）”；
-
label默认是inline元素，和input基线不对齐 → 统一设display: block或用align-items: start控制网格行 - 某些 UI 库给
input加了margin或padding，破坏100%宽度 → 重置：input, select, textarea { margin: 0; padding: 0.5rem; } - 响应式断点下
grid-template-areas改写漏掉某一行（比如只改了"name name"却忘了"email email"）→ 小屏时整行消失，不是错位
子网格适合卡片标题与内容共享父容器列轨道这类静态结构，但表单是动态内容容器——越想「复用轨道」，越容易卡在兼容性或内容高度突变上。老老实实嵌套 grid，比硬套 subgrid 少 debug 两天。
