auto-fill 和 auto-fit 的核心区别在于是否保留空轨道：auto-fill 按最大可能数量生成列（含空轨道），auto-fit 则收缩空轨道使现有项目撑满容器。
auto-fill 和 auto-fit 的核心区别在哪
关键看容器剩余空间是否保留空轨道：auto-fill 会按最大可能数量生成列（哪怕没内容），auto-fit 则会把空轨道收缩掉，让现有网格项撑满容器。
比如用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，即使只放一个子元素，也会强行占满整行并预留多个 200px 轨道；换成 auto-fit，那个子元素就会直接拉伸到 100% 宽度。
换行实际由 grid-auto-flow 控制，不是 repeat() 决定的
repeat() 只定义显式列数，真正决定是否“换行”以及怎么换的是 grid-auto-flow。默认值是 row，意味着新项目从左到右填，填不满就往下开新行——这才是你看到的“换行”效果。
如果设成 grid-auto-flow: column，项目就会从上到下填一列，满了再往右开新列，看起来像“竖向换行”。
立即学习“前端免费学习笔记（深入）”；
常见误操作：只改 auto-fill/auto-fit 却忘了检查 grid-auto-flow，结果发现项目不按预期排列。
响应式换行要配合 minmax() 和媒体查询才稳
minmax(250px, 1fr) 是常用组合，但注意：当容器宽度小于 min 值时，单列也放不下，浏览器会缩小网格项（可能破坏布局）或触发滚动。这不是 bug，是规范行为。
稳妥做法是加断点：
container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
@media (max-width: 600px) {
container {
grid-template-columns: 1fr;
}
}
或者用 grid-auto-columns + grid-auto-flow: dense 处理不规则高度导致的空隙，但要注意顺序可能错乱。
IE 不支持 auto-fill/auto-fit，别指望它自动换行
IE10/11 只认固定数值或 fr，遇到 auto-fill 会整个 grid-template-columns 失效，回退到普通流布局。
若必须兼容 IE，得用双重声明：
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
但注意：IE 的 -ms-grid 不支持响应式列数，只能写死列数，换行逻辑完全不同——这时候“换行”其实是靠 grid-row 手动指定位置实现的。
真实项目里，auto-fit 换行看着简单，但一旦涉及内容高度不均、字体加载延迟、动态插入节点，就容易出现意外交替空白行。多测几种内容长度和缩放比例，比光看文档有用。
