应使用 repeat(auto-fit, minmax(300px, 1fr)) 实现自适应列数，300px 是经实测的最小可交互宽度，兼顾触摸操作与文字可读性；需确保父容器设 display: grid、box-sizing 正确，并用 @supports 为老 Safari 提供媒体查询降级。
直接用 repeat(auto-fit, minmax(300px, 1fr)) 就行，别写死列数
写 grid-template-columns: 1fr 1fr 或 repeat(2, 1fr) 是固定两列，小屏下不会自动折叠，只会把内容压扁、触发横向滚动。真正起效的是让浏览器自己算“能塞几列”，而不是你指定数量。repeat(auto-fit, minmax(300px, 1fr)) 的意思是：每列至少 300px 宽，最多占满可用空间；容器里能放几列就放几列。250px 宽的手机屏幕，连一列都勉强塞下，自然退成单列。
为什么 300px 是关键阈值，不能随便改小
低于 300px，触摸操作困难、文字可读性下降，这是实际交互底线。设成 minmax(200px, 1fr) 看似更“灵活”，但在部分安卓 WebView（尤其是 250–280px 区间）会误判为可容纳两列，导致布局撕裂——左边字段被截断，右边空白，用户必须左右滑动才能看到完整表单。
-
300px是经过实测的最小可交互宽度，不是理论值 - 设成
320px也没问题，但别超过360px，否则窄屏 iPhone SE 可能横向溢出 - 不要用百分比或
em替代像素，minmax()第一个参数必须是绝对长度单位，否则行为不可控
遇到不生效？先查这三件事
写了 repeat(auto-fit, minmax(300px, 1fr)) 却还是两列，大概率不是语法错，而是环境没到位：
- 父容器没设
display: grid—— 媒体查询不会自动启用 Grid，必须显式声明 - 父容器宽度被限制，比如外层有
width: 100vw+padding，又没设box-sizing: border-box，导致实际内容区远小于视口 - DevTools 里
grid-template-columns显示为none或被划掉 —— 检查是否从 UI 库或 reset.css 继承了grid-template-columns: none
需要兼容老 Safari？加一层 @supports 降级
iOS 14.5 之前的 Safari 对 auto-fit 支持不稳定，可能渲染为空白或错列。稳妥做法是用 @supports 守卫， fallback 到媒体查询：
立即学习“前端免费学习笔记（深入）”；
form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@supports not (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) {
@media (max-width: 768px) {
form {
grid-template-columns: 1fr;
}
}
}
这样新浏览器走 auto-fit，老 Safari 自动切到媒体查询逻辑。别试图用 JS 检测宽度做响应式 —— 它无法响应设备旋转、分屏、系统字体缩放等原生 CSS 能处理的场景。
复杂点在于：列数变化只是表象，真正要控制的是每列的**最小可交互尺寸**和**容器的实际可用宽度**。很多人调来调去没效果，是因为盯着grid-template-columns 本身，却没确认父容器有没有真实撑开、有没有被其他样式悄悄覆盖。 
