最轻量的自动列切换方案是grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，其中auto-fit收缩空轨道，minmax确保每列不小于300px且等分剩余空间；断点兜底用@media (max-width: 600px) { grid-template-columns: 1fr }即可。
用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 实现自动切换
这是最轻量、无需媒体查询的解法。核心是让每列“至少 300px 宽”，容器宽度撑不开两列时，auto-fit 就会自动收束为单列。
-
minmax(300px, 1fr)表示每列最小 300px、最大占满剩余空间；设太小（如200px）可能在窄屏安卓 WebView 里意外出双列，设太大（如400px）则小屏出现横向滚动 -
auto-fit会收缩空轨道，auto-fill则保留预分配列——后者容易在内容少时留白，前者更符合“有几项显几项”的直觉 - 搭配
gap控制间距即可，不用改grid-auto-rows或justify-content，除非你明确需要居中对齐
为什么 @media 里只改 grid-template-columns: 1fr
手动断点仍是兼容性兜底首选，但很多人写错：不是所有属性都要重写，只动这一行就够了。
- 错误写法：
grid-template-columns: 100%（语法非法）、1fr 0fr（多余）、repeat(1, 1fr)（冗余） - 正确写法就是直接覆盖为
grid-template-columns: 1fr，简单干净，浏览器解析无歧义 - 断点值别硬套设备尺寸，推荐
@media (max-width: 600px)或@media (max-width: calc(100vw - 2rem))，避开 iPad 竖屏卡在两列的尴尬
flex 布局也能切，但表单里容易翻车
如果已有 display: flex 结构，强行改成 grid 成本高，那得知道 flex 的坑在哪。
- 别用
flex-basis: calc(50% - 0.5rem)—— Safari 旧版计算精度丢失，可能差 1px 就触发换行异常 - 表单项（
label+input）若扁平塞进同一 flex 容器，小屏flex-wrap: wrap会让 label 跑到 input 上方，语义断裂 - 安全做法是每个表单项单独包裹一层，再设
flex: 0 0 100%（手机） /flex: 0 0 calc(50% - 0.5rem)（大屏），但维护成本比 grid 高
Grid 和 Flex 在堆叠逻辑上的本质区别
这不是“哪个更好”，而是“谁更适合当前结构”。关键看内容是否天然分组。
- 左右栏高度差异大（比如左栏导航、右栏长文），
grid更容易对齐顶部，flex得加align-items: flex-start才不等高拉伸 - 内容顺序是“先排完 A 类再排 B 类”，但要视觉上交替显示？
grid-auto-flow: dense可以，flex必须靠 JS 重组 DOM - 安卓 4.4 及更老 WebView 不支持 grid —— 如果目标用户含大量存量政企设备，
flex + @media是唯一稳妥选择
真正麻烦的从来不是“怎么写单列”，而是“什么时候该切”——300px 这个阈值背后是字体、padding、gap 的综合影响，实际项目里建议用浏览器 devtools 的 grid overlay 功能实时拖拽容器宽度验证，而不是只盯着代码猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
