grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))是实现响应式表单自动换行的核心写法，可使列数随容器宽度动态增减、单行填满且不留空隙；必须搭配box-sizing: border-box及grid-column: span 1等细节控制语义与对齐。
直接用 display: grid，别碰 float 或扁平化 flex 容器——前者断点一加就错位，后者在小屏下会把 label 挤到 input 上方，语义全乱。
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是核心
这行代码让列数随容器宽度自动变化：每列至少 300px，宽了就并排，窄了就换行。不用写多个 @media 重定义列数，避免维护两套布局。
-
minmax(300px, 1fr)中的300px要根据表单控件实际最小可用宽度定，比如带图标的select或带清空按钮的input，可能需设为320px -
auto-fit和auto-fill行为不同：auto-fit会收缩空列，auto-fill会保留空占位，表单场景一律选auto-fit - 别在
@media里覆盖整条grid-template-columns，只微调gap或字体大小更稳妥
每个表单项必须单独包裹，且设 grid-column: span 1
哪怕你只有一组 label + input，也要包在 <div class="form-field"> 里，再给这个 div 设 grid-column: span 1。
- 不这么做，
label和input直接塞进 grid 容器，会各自成项，对齐和跨列行为不可控 -
grid-column: span 1防止某些浏览器（如旧版 Safari）把长文本textarea或带 icon 的input错判为“需要跨列” - 多行字段（如
textarea）要显式设grid-column: span 2（桌面端），否则会被压缩成单列宽度
gap 比 margin 更稳，但要注意 input 默认 box-sizing
gap 控制表单项间距，比靠 margin 可靠得多——它不会在换行时多出额外空隙，也不受父容器 padding 干扰。
立即学习“前端免费学习笔记（深入）”；
- 所有表单控件统一加
box-sizing: border-box，否则border和padding会让width: 100%失效，破坏网格列宽计算 -
input、select、textarea默认有border和padding，不重置会导致网格项高度不一致，影响align-items: center效果 - 触屏设备上，
gap值建议不低于0.75rem，确保点击区域不拥挤
真正容易被忽略的不是怎么写 grid，而是表单控件自身的默认样式和盒模型——它们会悄悄吃掉你精心计算的列宽，尤其在 iOS Safari 里，input[type="date"] 或带 appearance: none 的 select 表现差异极大，必须实机测试。
