直接给<form>设display: grid会断开label与input的for/id关联，导致点击label不聚焦、屏幕阅读器无法识别字段语义、IE11不渲染，且浏览器默认间距被重置；正确做法是用.field包裹每组label+input，再让.field成为grid子项。
直接给 <form> 设 display: grid 会出什么问题
根本不能用。label 和 input 会断开 for/id 关联，点击 label 不聚焦 input；屏幕阅读器读不出字段语义；IE11 完全不渲染；浏览器自动插入的换行和默认间距被重置，表单看起来“整齐”但实际不可用。
常见错误现象：document.getElementById('email').focus() 仍有效，但鼠标点 <label for="email"> 没反应；DevTools 里看到 label 和 input 在网格中错位，甚至堆叠在同一格里。
真正可行的做法是：
- 每个字段封装成一个
<div class="field">，里面放<label>和<input>（保持 for/id） - 让这些
.field元素成为 grid 容器的直接子项，而不是把<form>当容器 -
.field内部不用 grid，靠默认文档流维持语义和交互完整性
grid-template-columns 怎么写才适合表单对齐
别用 1fr 1fr 这种均分写法——标签长度不一，右边控件会被挤窄或撑宽。固定标签列 + 弹性控件列才是稳定解法。
立即学习“前端免费学习笔记（深入）”；
推荐组合：
-
grid-template-columns: 120px 1fr;：中文场景下足够，标签不缩放，控件自适应 -
grid-template-columns: max-content 1fr;：多语言项目首选，标签按文字宽度自动伸缩 - 跨整行元素（如提交按钮、
<textarea>）必须加grid-column: 1 / -1;，否则只占第一列
注意：max-content 在 Safari 旧版本里支持弱，若需兼容，退回到固定像素值更稳妥。
怎么用 gap 统一控制表单节奏，而不是靠 margin
gap 是唯一能可靠控制网格项间距的属性。用 margin-top 或 margin-bottom 在 grid 里极易塌陷、叠加、计算错乱——尤其当某些字段隐藏或动态插入时。
关键约束：
-
gap只作用于网格项之间，不影响容器内边距，padding需单独设 - 不要在
.field内部再设margin，否则和gap叠加导致间距翻倍 - 垂直节奏靠
gap统一，比如设gap: 0.75rem，所有字段上下间距一致，可读性立刻提升
响应式列数切换为什么别写多套 grid-template-columns
为桌面写三列、平板写两列、手机写一列，然后用媒体查询覆盖——这种写法维护成本高，断点容易漏，而且列数变化时往往还要同步调 gap 和字体大小。
更简洁可靠的方案是：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))- 配合
gap，容器宽度缩小时自动减少列数，无需手动断点 - 注意：minmax 第一个参数不能太小（如
100px），否则小屏下可能强行塞两列，文字挤压换行频繁
真正麻烦的不是列数切换，而是不同设备下标签文字换行位置不一致——这会让视觉对齐失效，得靠 white-space: nowrap 或调整 line-height 补偿，这点常被忽略。
