直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 就能解决绝大多数表单响应式问题，它使列数随容器宽度自然增减、每行填满不留空隙，避免媒体查询冗余和换行错位；auto-fit 合并空轨道而 auto-fill 预占轨道导致表单异常拉长，minmax 中 300px 应设为控件最小可操作宽度，且需语义化封装每个 label+input 为独立 grid item。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 就能解决绝大多数表单响应式问题，不用写一堆媒体查询，也不用担心换行错位或空隙失控。
为什么 auto-fit + minmax() 是核心解法
这组组合的行为是：浏览器先按最小宽度（如 300px）尽可能铺列，再把剩余空间均分给实际存在的列。结果就是列数随容器宽度自然增减，且每行填满、不留空隙。
-
auto-fill会预占所有可能轨道，导致空网格项撑高容器，表单莫名变长 - 只写
1fr 1fr或repeat(2, 1fr)完全不响应尺寸变化，小屏照样双列压扁输入框 -
minmax(300px, 1fr)中的300px应设为控件最小可操作宽度——带 label 的<input>通常不能窄于280px，否则文字截断或点击困难
HTML 结构必须匹配 grid 的语义流
每个表单项（<label> + <input>）必须封装在一个独立的 <div> 里，作为单个 grid item。别把所有 label 放一列、所有 input 放另一列。
- 错误做法：
<div class="form-grid"><label>邮箱</label><label>密码</label><input><input></div>→ 响应式时 label 和 input 会错行 - 正确结构：
<div class="form-grid"><div><label>邮箱</label><input type="email"></div><div><label>密码</label><input type="password"></div></div> - 如果 label 和 input 需要不同对齐（比如 label 左对齐、input 右对齐），在每个
<div>内部用display: grid; grid-template-columns: 100px 1fr;，而不是在外层统一设列
容易被忽略的兼容性与样式陷阱
IE11 完全不识别 auto-fit，会直接跳过整条 grid-template-columns 声明，退化成垂直堆叠的 block 流——而且 @supports 在 IE11 下无效，无法 fallback。
立即学习“前端免费学习笔记（深入）”；
- 必须提供降级方案：比如外层加
class="form-grid fallback"，用.fallback > div { margin-bottom: 1rem; }确保 IE 下仍有合理间距 - 不要给 grid 容器设固定
height或min-height: 100vh，否则auto-fit依赖的隐式行高度计算会失效，列数卡死 - 避免用
display: contents包 label+input 除非你确认父容器没有 border/background —— 它会让元素脱离渲染树，某些无障碍工具可能读不到
真正难的不是写出那行 repeat(auto-fit, minmax())，而是让每个表单项 DOM 结构干净、语义完整，并接受 grid 的“自动流”逻辑——一旦手动干预列数或强行跨行，响应式就变成了维护噩梦。
