直接写 grid-template-columns: 1fr 1fr 在手机上不生效，因其强制两列且无响应逻辑；真正有效的是 repeat(auto-fit, minmax(300px, 1fr))，它动态控制列数，小屏自动退为一列，300px 是最小可交互阈值。
为什么直接写 grid-template-columns: 1fr 1fr 在手机上不生效
因为这行 CSS 是“固定两列”，浏览器不会自动降级。哪怕屏幕只剩 300px 宽，它仍会强行把两个 1fr 列塞进去，结果输入框被压扁、文字换行错乱、甚至触发横向滚动。真正起作用的是动态列数控制逻辑，不是静态列声明。
repeat(auto-fit, minmax(300px, 1fr)) 这行代码到底在干什么
它告诉浏览器：“每列至少 300px 宽，最多占满可用空间；容器里能塞下几列就塞几列”。小屏下 300px × 2 > 可用宽度 → 自动退为 1 列；中屏刚好塞下 2 列；大屏可能撑出 3 列（除非你加 max-width 限制）。这不是猜测，是 Grid 的自动计算行为。
-
300px是关键阈值：低于这个宽度，控件操作困难，所以设为最小可交互尺寸 -
auto-fit比auto-fill更合适——前者收缩空轨道，后者保留预分配列，容易导致空白格 - 别用
minmax(200px, 1fr)：部分安卓 WebView 在 250–280px 区间会误判为可双列，造成布局撕裂
移动端单列失效的三个常见原因
写了正确 CSS 却没效果？大概率卡在这三处：
- 父容器没设
width: 100%或被overflow: hidden裁剪，DevTools 里grid-template-columns显示为none - 表单项没包裹成独立块级元素，比如把所有
<label>和<input>扁平丢进一个<div class="form-grid">，Grid 会把每个标签/输入框当单独 item 处理，导致 label 换行、input 悬空 - 主题 CSS 里存在
.wpcf7-form input { display: inline-block }这类强制内联样式，优先级高于你的 Grid 布局，必须用!important覆盖或提高选择器 specificity
要不要加媒体查询？什么时候必须加
纯 auto-fit + minmax() 足够覆盖绝大多数场景，但以下情况必须补媒体查询：
立即学习“前端免费学习笔记（深入）”；
- 需要兼容 iOS 14.5 之前的 Safari：它对
auto-fit支持不稳定，直接 fallback 到@media (max-width: 768px) { grid-template-columns: 1fr; } - 表单里有全宽元素（如
<textarea>或提交按钮），它们需跨列显示，此时 media query 中加grid-column: 1 / -1更可控 - 设计稿明确要求 iPad 竖屏（768px）也保持单列，而非双列，则断点不能设在 768px，得用
(max-width: 600px)并配合grid-column: span 1强制单列
真正难的不是写对那行 Grid 代码，而是确保每个表单项是语义完整的独立单元、父容器宽度干净、且没有第三方 CSS 暗中覆盖 display 行为。
