auto-fill 保留所有空轨道，auto-fit 合并空轨道；auto-fill 配合 minmax(200px,1fr) 和 grid-auto-flow:row 实现自动换行填充，列宽一致且响应式更新。
auto-fill 和 auto-fit 的区别到底在哪
很多人写 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 发现列数没按预期撑满容器，其实是混淆了 auto-fill 和 auto-fit 的行为。前者会**保留所有空轨道**（即使没放子元素），后者会**合并空轨道**，让剩余列自动拉伸占满空间。
如果你要“自动换行填充”，真正需要的是 auto-fill —— 它确保每行尽可能多塞下满足最小宽度的列，哪怕最后一行有空位，也保持列宽一致、换行逻辑清晰。
为什么加了 auto-fill 还不换行
常见错误是漏掉 minmax() 或写错参数顺序。Grid 自动换行依赖于明确的单列最小/最大约束，仅写 repeat(auto-fill, 200px) 不会换行，因为 Grid 认为列宽固定、无需调整。
-
minmax(200px, 1fr)是关键：最小 200px，最大可伸缩到均分剩余空间 - 必须配合
grid-auto-flow: row（默认值，但显式写上更稳妥） - 容器需有明确宽度（如
width: 100%或设为 flex item），否则 Grid 可能按内容宽渲染，看不出换行效果 - 子元素不能设
grid-column或grid-row跨行跨列，否则破坏自动布局流
响应式下 auto-fill 的实际表现
auto-fill 是响应式的天然搭档，但要注意它不会“主动重排”，而是靠容器宽度变化触发重新计算列数。比如在媒体查询中改容器宽度，列数会立刻更新。
示例：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
gap: 1rem;
}
当容器从 800px 缩到 500px，列数会从 3 列 → 2 列 → 换行；但如果子元素本身设置了 min-width: 300px，那即使容器够宽，也会因内容撑开导致换行提前发生。
容易被忽略的兼容性与调试点
auto-fill 在所有现代浏览器都支持（Chrome 57+、Firefox 52+、Safari 10.1+），但 IE 完全不支持 —— 如果需兼容 IE，得用 display: flex + flex-wrap 回退。
调试时建议打开浏览器 DevTools 的 Layout 面板，勾选 “Show grid line numbers”，能直观看到空轨道是否被生成（auto-fill 会画出所有轨道，包括空的；auto-fit 只画有内容的）。
另一个坑：如果父容器用了 overflow: hidden 且子元素总宽超容器，auto-fill 可能因无法收缩列宽而溢出——这时得检查 minmax() 的最大值是否设为 1fr（允许压缩）而非固定值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
