父容器未声明grid-template-columns导致subgrid失效；必须显式定义列模板，子项需设置grid-column范围并确保是父网格直接子项，三层嵌套需中间层双轴subgrid且禁用gap。
父容器没写grid-template-columns，subgrid就失效
表单对齐失败，90%是因为父容器只写了display: grid和gap，却没定义列轨道。Subgrid 不继承gap插入的隐式列，也不认grid-auto-columns或repeat(auto-fit, ...)生成的动态列数。
必须显式声明带语义的列模板：
-
✅ 正确：grid-template-columns: [label] 120px [control] 1fr [helper] max-content -
✅ 可行：grid-template-columns: repeat(3, minmax(0, 1fr))（显式三列，无命名线但可配合span） -
❌ 失效：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))（浏览器解析为none）
检查 DevTools 的 Computed 样式，若grid-template-columns显示none，说明整条声明已被丢弃——不是语法错，是父容器没给继承资格。
display: contents会让子表单项失去subgrid资格
有人用display: contents把.form-field包装层“透传”过去，再给它设grid-template-columns: subgrid，结果无效。Subgrid 要求该元素本身是父网格的**真实直接子项**，且自身是display: grid容器。
立即学习“前端免费学习笔记（深入）”；
常见错误结构：
-
❌：<form><div style="display: contents"><div class="field"></div></div></form>→.field不是直接子项 -
✅ 替代方案：删掉中间div，让.field直接作为<form>子元素，并加grid-column: 1 / -1占满父列
如果结构不能改，就别用 subgrid —— 改用显式grid-column: label / control手动锚定，比硬套失效的 subgrid 更可靠。
子表单项必须设display: grid + grid-template-columns: subgrid + 显式范围
只写grid-template-columns: subgrid不够。它只是“申请继承”，不自动铺满；子项得明确告诉父网格：“我要占哪几列”。
例如父容器定义了三列：grid-template-columns: [l] 120px [c] 1fr [h] max-content（列线编号 1/2/3/4），那么：
-
✅ 正确：grid-column: l / h或grid-column: span 3 -
⚠️ 危险：grid-column: 2 / 3→ 只占中间一列，标签和控件会挤在一起 -
❌ 错误：完全不写grid-column→ 默认grid-column: auto，只占单列，破坏对齐链
表单项内子元素（如label、input、.helper-text）直接使用父级命名线：label { grid-column: l; }、input { grid-column: c; }，无需再算宽度或margin。
三层表单嵌套时，中间层必须双轴subgrid且禁用gap
比如<form> → <fieldset> → <div class="field">，想让.field内的元素也对齐顶层列线，<fieldset>不能只是容器——它必须同时满足：
- 设
display: grid - 双轴启用：
grid-template-columns: subgrid且grid-template-rows: subgrid - 禁用
gap、grid-auto-rows、空占位元素（如<div></div>）
漏掉任一条件，.field就只能对齐<fieldset>自己的轨道，而不是<form>的原始列线。这种穿透对齐非常脆弱，稍有干扰就会断链——与其强撑三层，不如把<fieldset>设为display: contents并确保.field仍是<form>直接子项。
