grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 是唯一靠谱的自动换行写法，能实现列数随容器宽度自动增减、单行填满且不留空隙；auto-fill 会提前占位撑高容器，纯 1fr 不响应尺寸变化。
grid-template-columns: repeat(auto-fit, minmax(...))) 是唯一靠谱的自动换行写法
直接说结论：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 才能真正实现「列数随容器宽度自动增减 + 单行填满 + 不留空隙」。用 auto-fill 会提前占位、撑高网格容器；而只写 1fr 1fr 或 repeat(2, 1fr) 则完全不响应。关键在 auto-fit 配合 minmax() 的组合行为：浏览器先按最小宽度铺满所有可能列，再把剩余空间均分给实际存在的列。
常见错误现象：
– 表单在小屏下仍强行显示两列，输入框被压扁
– 大屏下只显示一列，右侧大片空白
– 某些字段莫名换行，但不是按容器断点，而是受内容长度影响
-
minmax(300px, 1fr)中的300px应设为表单控件最小可操作宽度（如带 label 的input通常需 ≥280px） - 若 label 和 input 分属不同 grid item，建议用
display: contents包一层避免多出一层 DOM 干扰网格行高 - 不要对 grid container 设
height，否则auto-fit可能失效——它依赖隐式行的自然高度计算
label 和 input 必须成对放进同一个 grid cell 才能保证语义与换行同步
很多人把所有 label 放一列、所有 input 放另一列，看似整齐，但会导致响应式错位：label 还在第一列，input 已换到第二行。正确做法是每个字段（label + input）作为独立 div，每个 div 占一个 grid area。
使用场景：登录页、注册页、地址编辑等字段数量固定但屏幕尺寸多变的表单
- HTML 结构应类似：
<div class="form-grid"> <div> <label>邮箱</label><input type="email"> </div> <div> <label>密码</label><input type="password"> </div> </div>
- CSS 中无需额外定义
grid-area，靠grid-auto-flow: row（默认）自然顺序填充 - 若需 label 左对齐、input 右对齐，对每个字段
div设display: grid; grid-template-columns: 100px 1fr;，而非在整个表单上统一设列
IE11 不支持 auto-fit/auto-fill，必须提供 fallback
IE11 会直接忽略整条 grid-template-columns 声明，退回到 block 流，导致表单垂直堆叠且无间距。不能只靠 @supports，因为 IE11 不识别该规则。
兼容性影响：国内仍有约 3% 的政务/银行内网用户仍在用 IE11
- 用
@supports not (grid-template-columns: repeat(auto-fit, 1fr)))包裹 Grid 布局，并在外部先写一套 Flex fallback： .form-grid { display: flex; flex-direction: column; } .form-grid > div { width: 100%; } @media (min-width: 768px) { .form-grid { flex-direction: row; flex-wrap: wrap; } .form-grid > div { flex: 1 1 300px; margin-right: 1rem; } }- 注意：IE11 的
flex-wrap: wrap对flex: 1支持不稳定，务必加max-width限定单个字段宽度
margin 和 gap 在响应式换行时表现完全不同
gap 是网格专属间距，它不会影响轨道计算，且在换行后依然保持列间/行间等距；而 margin 属于项目自身，会参与 minmax() 的尺寸评估，容易导致换行点偏移或列宽异常。
性能影响：大量 margin 触发重排，gap 是纯渲染层处理，更轻量
- 永远优先用
gap: 1rem控制表单字段间距，而不是给每个字段margin-bottom: 1rem - 若需首尾不留空隙（比如表单顶部不需要上边距），用
:first-child/:last-child配合gap无法解决——此时应改用padding在容器上控制内外边距 - 不要对 grid item 设
margin: auto居中，这在换行后会破坏auto-fit的列数推导逻辑
实际最易被忽略的是：当表单里混入 textarea 或带图标的 input 时，它们的 min-height 或 padding 会改变单个 grid item 的基准尺寸，进而影响 minmax() 的“最小”判定。这时候得单独给这类项设 min-width: 0 或重置 box-sizing，否则换行位置会比预期更早出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
