应将 display: grid 应用于每组 label+input 的容器（如 .field），而非整个 form，以确保语义、视觉和可访问性一致；配合 grid-template-columns、justify-self: end 和 grid-auto-rows 等实现稳定对齐与响应式退化。
为什么直接给 form 设 display: grid 会错乱
常见错误是把 display: grid 加在整个 form 上，再用 grid-template-columns: max-content 1fr 想“一列放所有 label、一列放所有 input”。结果 label 全挤在第一列顶部，input 全堆在第二列顶部——语义断裂，键盘 Tab 顺序错乱，屏幕阅读器无法识别配对关系。
根本原因是：Grid 不会自动按 DOM 顺序“两两分组”，它只按子元素顺序平铺进网格轨道。label 和 input 必须成对包裹在同一个父容器里，才能保证视觉、语义、可访问性三者一致。
- 每组 label + input 必须包在独立的
<div class="field">中 - 给
.field设display: grid，而不是给form - 避免用
grid-area为每个元素单独命名——维护成本高，且不适用于动态表单
两列布局怎么让 label 右对齐又不挤 input
目标是 label 文字右端对齐到同一垂直线，同时 input 左侧留出足够空白、不被压缩。关键不是靠 text-align: right 或 margin-left: auto，而是用 justify-self: end 配合列宽策略。
- 给
.field设grid-template-columns: max-content 1fr：第一列宽度由最长 label 决定，其余 label 自动右对齐到该列右边缘 - 给
label加justify-self: end，不是给.field加 - 给
input加grid-column: 2，确保它始终落在第二列 - 加
white-space: nowrap和overflow: hidden到label，防换行破坏右对齐效果
多行表单如何保持上下 label 垂直对齐
如果不同 .field 的 label 字数差异大（比如“姓名” vs “用户协议确认邮箱地址”），仅靠 max-content 会导致第一列高度不一致，视觉上 label 底部参差不齐。
立即学习“前端免费学习笔记（深入）”；
解决办法是统一行高约束，而非依赖内容撑开：
- 给
.field加grid-auto-rows: minmax(36px, auto)，强制每行最小高度一致 - 加
align-items: center，让 label 和 input 都在单元格内垂直居中 - 避免给
label设height—— 它会和grid-auto-rows冲突，导致文字截断或溢出 - 若需支持点击放大等交互，必须用固定行高（如
36px）替代minmax(36px, auto)，否则字体变大时整行会跳动
响应式下怎么安全退化为单列
小屏时两列太窄，必须堆叠。但直接改 grid-template-columns: 1fr 会让 justify-self: end 把 label 推到最右边，反而难读。
- 用
@media (max-width: 480px)重置.field的列定义：grid-template-columns: 1fr - 同步重置
label的对齐：justify-self: start - 必须显式设置
row-gap: 16px（不能只靠gap），否则移动端手指点选区域过小 - 别忘了给
input加width: 100%，否则它可能收缩到内容宽度
<div class="field">），尺寸靠 Grid 轨道（grid-template-columns + grid-auto-rows），对齐靠单元格级控制（justify-self / align-items）。漏掉任一环，都会在某个浏览器或某种输入长度下突然错位。 
