auto-fit 会收缩空轨道并拉伸剩余列，auto-fill 保留所有轨道；minmax(200px,1fr)使列等宽且≥200px，随容器宽度自动增减列数；不换行主因是父容器缺宽度限制。
auto-fit 和 auto-fill 有什么区别？
用 auto-fit 时，Grid 会把空的轨道（没内容的列）直接收缩掉，剩余列会自动拉伸填满容器；而 auto-fill 会保留所有生成的轨道，哪怕它们是空的——这容易导致“看不见但占位”的列，影响布局预期。
绝大多数自适应场景该选 auto-fit，除非你明确需要预留空白列做动画或 JS 动态填充。
minmax(200px, 1fr) 是怎么工作的？
minmax() 不是“最小 200px、最大 1fr”，而是“每列宽度在 200px 到无限大之间浮动，但 Grid 会尽量让所有列等宽”。实际效果是：当容器够宽，就多分几列；变窄时，列数自动减少，单列宽度始终 ≥200px。
- 如果写成
minmax(200px, 2fr)，不会让某列变宽两倍——fr在minmax里只起上限参考，真正分配仍按等分逻辑 - 想强制某列更宽？得用额外轨道定义，比如
grid-template-columns: 2fr minmax(200px, 1fr) 1fr - 移动端下 200px 可能太宽，建议配合
clamp()：minmax(clamp(160px, 25vw, 280px), 1fr)
为什么设置了 auto-fit + minmax 还不换行？
常见原因是父容器没设 width 或 max-width，导致 Grid 认为“无限宽”，直接撑出一整行长列。必须确保容器有明确的水平约束：
立即学习“前端免费学习笔记（深入）”；
- 给父元素加
width: 100%或max-width: 1200px - 避免父级有
white-space: nowrap或display: inline-grid - 检查是否误用了
grid-auto-flow: column—— 它会让 Grid 横向填满，禁用自动换行
一个可靠写法：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，配合
gap: 1rem 和带宽度限制的容器。
IE 不支持怎么办？
auto-fit 和 minmax() 在 IE 中完全无效。如果必须兼容 IE11，不能靠降级 CSS，得换思路：
- 用媒体查询手动切列数：
repeat(1, 1fr)→repeat(2, 1fr)→repeat(3, 1fr) - 改用 Flexbox 模拟 Grid 流式行为（需 JS 补齐换行逻辑）
- 服务端或构建时注入 CSS 候选方案（如 PostCSS 插件生成 fallback）
注意：即使加了 @supports (display: grid)，IE 也会忽略整个规则块，所以 fallback 必须写在独立规则中，且放在 Grid 规则之前。
