最稳妥的小屏自动换行写法是 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 则按最大可能列数生成轨道（哪怕没内容），导致：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 小屏下仍保留多列结构，内容被强行压缩甚至溢出
• 配合 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。