如何用CSS Grid实现响应式表单输入框对齐

最稳妥的写法是：为每组 .field 独立启用 display: grid，并搭配 grid-template-columns: max-content 1fr。这种方法能够稳定实现 label 与 input 的配对与对齐，无需预估宽度、不破坏语义，且响应式切换时表现可靠。

整个 form 设置 display: grid 导致错乱的原因

一个常见的误区是：为整个 form 设置 display: grid 和 grid-template-columns: max-content 1fr，结果所有 label 被挤入第一列，所有 input 被挤入第二列。这会引发以下问题：

• 键盘 Tab 顺序断裂——焦点从最后一个 label 直接跳转到第一个 input
• 屏幕阅读器无法识别配对关系，label[for] 失效
• grid-auto-rows 隐式生成的行高不一致，视觉上出现 label “下掉”的效果

问题的根源在于 grid 将整个 form 扁平化——label 和 input 不再属于同一逻辑单元。列定义本身没有错误，但语义结构遭到破坏。

justify-self: end 是实现 label 右对齐的正确写法

许多人尝试过 text-align: right 或 margin-left: auto，但结果要么是 input 缩窄，要么是换行，且在 Safari 中可能失效。真正可控的方法是分离“定位”与“尺寸”：

• 为 label 设置 justify-self: end —— 内容紧贴列右边缘，不额外扩大占据空间
• 为 input 设置 min-width: 0 —— 防止被长 label 撑变形
• 必须搭配 white-space: nowrap; overflow: hidden; text-overflow: ellipsis，否则超长 label 换行后会破坏列宽计算
• 注意，text-align: right 作用于块内文字流，会拉伸 label 的实际宽度，干扰网格轨道分配

小屏切换单列时，grid-column 定位失效的原因

仅修改 grid-template-columns: 1fr 是不够的，因为 .field label 仍按原列号（第 1 列）渲染，.field input 仍在第 2 列，两者会重叠。必须同步重置列定位规则：

• 在媒体查询中添加 .field label, .field input { grid-column: 1; }
• 同时将 justify-self: end 改为 justify-self: start，否则 label 会跑到最右侧留白处
• 不要使用 flex-direction: column 回退——那会脱离 grid 上下文，失去列对齐能力
• 如果希望保留冒号对齐（如“姓：”），建议使用 grid-template-areas 显式控制区域，比纯列定位更稳定

最容易被忽略的是行高统一问题。如果没有设置 grid-auto-rows 或 grid-template-rows，不同 label 的高度差异（例如带有辅助文本或 placeholder 换行）会导致整行被撑开，下一行 label 自然“下掉一截”。这不是列的问题，而是行轨道失控。