直接设 width 或 min-width 失效是因为对齐依赖不可控的内容尺寸；subgrid 失效主因是父容器未定义 grid-template-columns 或 DOM 层级中断继承链。
为什么直接设 width 或 min-width 会失效
表单里每个 .form-item 都是独立 DOM，如果各自设 label { width: 120px }，实际渲染时会因字体、缩放、padding 差异导致视觉错位；更糟的是，当某行 label 为空或内容极短，该列就塌缩，破坏整体对齐。这不是样式没写对，而是把“对齐”交给了不可控的内容尺寸。
grid-template-columns: subgrid 必须配合显式父轨道
父容器（如 .form）必须明确定义列轨道，不能只靠 grid-auto-columns 或 gap。常见错误是写了 display: grid 却漏掉 grid-template-columns，结果子元素的 subgrid 没有可继承的列信息，浏览器静默忽略。
- ✅ 正确：父容器写
grid-template-columns: max-content 1fr或120px 1fr - ✅ 子项（
.form-item）设display: grid+grid-template-columns: subgrid - ❌ 错误：父容器用
grid-auto-flow: column，子项加subgrid—— 无轨道可继承 - ❌ 错误：中间夹了
display: contents容器或fieldset——subgrid只认直接子元素
移动端响应式切换时别切断继承链
小屏下想让标签和输入框堆叠，不是给子项写 @media 改列定义，而是只改父容器的 grid-template-columns：
- 桌面端：父容器
grid-template-columns: 120px 1fr - 移动端：
@media (max-width: 768px) { .form { grid-template-columns: 1fr; } } - 子项保持
grid-template-columns: subgrid不变，自动坍缩为单列，但行轨道（如[label] auto [input] 1fr）仍继承，对齐不抖动 - 若需隐藏
.hint，用display: none，避免visibility: hidden留空行破坏轨道高度一致性
命名轨道线必须由父级声明，子项只能消费
想让 label 始终钉在第一行、input 在第二行，得靠命名线控制，但规则很硬：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须先写
grid-template-rows: [label] auto [input] 1fr [hint] auto - 子项中
label写grid-row: label✅ - 子项自己写
grid-template-rows: [label] subgrid❌ —— 浏览器直接丢弃，computed 样式里显示为none - Chrome/Firefox 开发者工具里打开 “Show line names”，一眼能看出哪些线是父级来的、哪些没生效
真正卡住的从来不是那一行 subgrid 声明，而是 DOM 层级里一个看不见的空文本节点、一个默认 display 的 fieldset、或者媒体查询里多加的一句子项列重定义——它们都会悄悄断掉继承链。
