用 repeat(auto-fit, minmax(max(150px, 34%), 1fr)) 可实现无媒体查询的自动单列切换：宽屏时按150px生成多列，窄屏下因34%
用 repeat(auto-fit, minmax()) 实现无媒体查询的自动单列切换
只要容器宽度压到两列放不下，Grid 就会自动退为一列——关键不是“让它变”，而是让 minmax() 的最小值在窄屏下「撑满整个容器」。最简写法是：grid-template-columns: repeat(auto-fit, minmax(max(150px, 34%), 1fr))。
这个 max(150px, 34%) 是核心：宽屏时 34% 比 150px 小，实际生效的是 150px，允许两列并存；窄屏时 34% 对应像素值跌破 150px，max() 保证下限仍是 150px，但 auto-fit 发现容器连两个 150px + gap 都塞不下，就只生成一列。
- 34% 不是魔法数字，它略大于 100%/3（≈33.33%），确保三列绝不会出现
- gap 越大，百分比要微调——gap=30px 时建议试 36%～37%
- 别用
min(150px, 100%)，它会让最小值随屏幕缩小而变小，直接破坏保底宽度
@media 手动切换单列更可控，但只改 grid-template-columns
如果设计稿明确要求「768px 及以下必须单列」，媒体查询反而更稳。此时只需覆盖列定义，其他属性不用动：
@media (max-width: 768px) { .cont { grid-template-columns: 1fr; } }
常见错误是写成 100% 或 1fr 0fr——前者非法，后者多余。也别顺手改 gap 或 grid-auto-rows，除非真有视觉需求。
- 断点设 768px 而非 480px，能避开 iPad 竖屏卡在双列的尴尬
- 如果原布局用了
repeat(3, 1fr)，媒体查询里直接写1fr，别留空格或逗号 - 父容器若设了
max-width且没配合媒体查询，auto-fit 可能卡住不重排
minmax() 第一个参数设太小或太大都会翻车
设 200px 可能在某些安卓浏览器里触发双列（尤其 WebView 内核），设 400px 又容易让窄屏横向滚动。临界值得实测：
- 拿真实手机访问，拖动窗口宽度观察首次单列的像素点
- 把卡片内容填满（文字、图片、边框、padding）再测，纯空 div 宽度计算不准确
- 如果子项写了
min-width: 300px，Grid 会优先满足它，哪怕导致溢出——应删掉或改用width: 100%
auto-fit 和 auto-fill 的行为差异直接影响是否退列
auto-fit 会收缩空轨道，空间不够时自动减少列数；auto-fill 则保留所有预分配轨道，留白也不退。
所以响应式场景一律用 auto-fit。比如：repeat(auto-fit, minmax(300px, 1fr)) 在窄屏下只渲染一列，而 auto-fill 会渲染多列但每列只有 300px 宽，后面全是空白。
- 别给 grid-item 设固定
width，它会和grid-template-columns冲突 -
justify-content: center可让单列居中，但会影响整体对齐逻辑，慎用
实际项目里，max(150px, X%) 方案省代码但需调参，@media 方案直白但得多写几行。真正容易被忽略的是：gap 值和子项自身约束（比如 padding、border-box）会吃掉可用宽度，最终决定临界点的不是屏幕宽度，而是「容器净宽 - gap 总和」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
