正确做法是每组 label + input 单独包裹在 .field 容器里再启用 grid；因整个 form 加 grid 会破坏语义、打乱 tab 顺序、使屏幕阅读器失效，且导致视觉对齐但实际不可用。
直接给 form 设 display: grid 会破坏语义、打乱 Tab 顺序、让屏幕阅读器失效——正确做法是每组 label + input 单独包裹在 .field 容器里，再对这个容器启用 Grid。
为什么整个 form 加 grid 会错乱
常见现象：所有 label 挤在第一列顶部，所有 input 堆在第二列顶部，视觉“对齐”但实际不可用。
- 键盘 Tab 顺序断裂：焦点从最后一个
label直接跳到第一个input - 屏幕阅读器读不出配对关系：
label[for]失效，input变成无标签控件 - 响应式时无法单独控制某组间距或堆叠逻辑
- 根本原因是 Grid 不识别语义分组，只按 DOM 子元素顺序平铺进轨道
每组 .field 怎么设 grid-template-columns
目标是 label 自适应宽度、input 弹性占满，又不互相挤压。别用 1fr 1fr 或 auto 1fr，它们要么留白过多，要么让 input 换行。
- 用
grid-template-columns: max-content 1fr：第一列按最长 label 实际文字宽收缩，其余 label 自动右对齐到同一垂直线 - 给
.field label加justify-self: end，不是给.field本身加 - 给
.field input加grid-column: 2，确保它始终落在第二列 - 给
.field label加white-space: nowrap; overflow: hidden; text-overflow: ellipsis，防换行破坏列宽计算
小屏怎么安全退化为单列
只改 grid-template-columns: 1fr 不够，label 和 input 会因默认列号残留而重叠，且 justify-self: end 会让 label 跑到最右边空白处。
- 在媒体查询中同步重置：
.field label, .field input { grid-column: 1; } - 把
justify-self: end改成justify-self: start - 显式设
row-gap: 0.75rem（别依赖默认值），保证手指可点区域足够 - 避免用
flex-direction: column回退——那会脱离 Grid 上下文，丢失列对齐能力
最容易被忽略的行高统一问题
不同 label 字数差异大（比如“姓名” vs “用户协议确认邮箱地址”），或 input 含多行 placeholder 时，没约束行轨道会导致整行被撑开，下一行 label 就“往下掉一截”——这不是列的问题，是行轨道失控。
- 必须加
grid-auto-rows: minmax(36px, auto)，强制每行最小高度一致 - 搭配
align-items: center让 label 和 input 都垂直居中 - 别给
label设height或line-height单独调，会和grid-auto-rows冲突 - 若需支持系统字体放大等交互，改用固定
grid-template-rows: 36px替代minmax()，否则整行会跳动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
