最稳妥的小屏自动换行写法是 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))；auto-fit 合并空轨道实现真正重排，而 auto-fill 保留空轨道易导致布局异常，minmax() 中最小宽度必须在前、1fr 在后，顺序不可颠倒。
用 auto-fit + minmax() 实现小屏自动换行
直接结论：用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是最稳妥的写法。它会让每个格子至少占 300px，超出就自动新增一列；屏幕缩小时，列数减少，内容自然“向下换行”。auto-fill 表现类似，但会保留空轨道，容易撑高容器或留白，一般不推荐用于响应式换行场景。
minmax(300px, 1fr) 中两个值的作用不能反
minmax() 第一个参数是**最小宽度**，第二个是**最大可伸展方式**。写成 minmax(1fr, 300px) 是无效的——CSS 会直接忽略整条声明。常见错误是凭直觉把“想让它变宽”放在前面，结果样式不生效。实际中，300px 是防止单列过窄（比如文字挤成一团），1fr 是让剩余空间均分，两者角色固定。
为什么 auto-fit 比 auto-fill 更适合换行
两者区别在“空轨道是否渲染”：auto-fit 会合并空轨道，让元素真正重排；auto-fill 则按最大可能列数生成轨道（哪怕没内容），导致：
- 小屏下仍保留多列结构，内容被强行压缩甚至溢出
- 配合
justify-content: space-between时，空轨道拉大间距，布局断裂 - 用
:nth-child()选中元素时，序号包含空轨道，逻辑错乱
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); /* ✅ 小屏自动变成 1 列，中屏 2 列，大屏 3 列… */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))); /* ❌ 小屏仍按 4 列生成轨道，只是前三列为空 */
需要精确控制最小列数？加 min() 或媒体查询兜底
auto-fit 在极窄屏（比如 iPhone 竖屏 375px）可能压出 120px 宽的列，文字阅读困难。这时不能只调 minmax() 下限，因为会影响中大屏布局。更可靠的方式是：
立即学习“前端免费学习笔记（深入）”；
- 用
min(280px, 100%)替代固定像素，确保单列不超屏宽 - 或加一条
@media (max-width: 480px)，强制设为1fr - 避免用
max-content或fit-content()，它们在 flex/grid 里行为不稳定，尤其在 Safari 中易失效
换行本质是列数动态变化，不是“换行符”概念——别指望靠 flex-wrap 那套思路去调 grid。
