auto-fill保留空轨道，auto-fit丢弃空轨道；前者按容器宽度预设最大列数并全部创建，后者仅按子元素数量创建所需列数并均分剩余空间。
auto-fill 会保留空轨道，auto-fit 会丢弃它
这是最根本的区别，不是“效果略有不同”，而是布局计算逻辑完全不同。浏览器对 auto-fill 的处理是：先算出容器最多能塞下多少个 minmax() 定义的轨道（按最小宽度向下取整），然后**不管有没有子元素，都建这么多列**；auto-fit 则是：先看有多少个子元素，只建够用的列数，再把剩余空间均分给这些列。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 在 700px 宽容器中生成 2 列（500px 占位）+ 1 个空列（200px 占位），导致最后一列被压缩、内容换行或右侧留白；而同样写法换成 auto-fit，就只建 2 列，每列宽约 350px，内容舒展无挤压。
关键点在于：空轨道是否参与空间分配——auto-fill 中的空列哪怕没内容，也真实存在、占位、分走 1fr 空间；auto-fit 中它根本不存在。
什么时候该用 auto-fill？看你要不要“预留插槽”
如果你的布局需要结构稳定、未来可能动态插入内容，或者依赖固定列数做 JS 控制、动画对齐、后台配置映射，那就选 auto-fill。
- 仪表盘卡片区：设计为 4 列网格，但初始只加载 2 块 widget，仍需保持 4 列视觉结构，方便后续拖拽补位
- 表单字段组：每行最多放 3 个输入框，但某些状态下只显示 1 个，仍要预留左右空位保证对齐基准线
- Grid + JS 动态渲染：你通过 JS 控制某列是否显示，前提是该列轨道已存在，否则
grid-column指令会失效
注意：auto-fill 在小屏下容易因最小宽度临界点突增列数（比如从 2 列跳到 4 列），造成意外换行或滚动条，调试时得盯着容器宽度和 minmax() 最小值的关系。
auto-fit 更适合内容驱动型布局，但列数不固定
auto-fit 的目标很明确：让已有内容尽可能填满容器。它不承诺列数，只承诺“不浪费空间”。这在卡片列表、图片画廊、按钮组等数量不确定的场景里更自然。
典型表现：
- 容器宽 600px，
minmax(200px, 1fr)→ 生成 3 列，各 200px - 容器宽 600px，但只有 2 个子元素 → 只建 2 列，各 300px（不是 200px + 200px + 200px 留白）
- 容器宽 900px，有 5 个子元素 → 先尝试 5 列（每列 ≥200px），900 ÷ 5 = 180px
容易踩的坑：如果你用 CSS 动画控制网格项宽度变化，或 JS 依赖 grid-column-end 计算位置，auto-fit 下列数可能随内容增减突然变化，导致布局跳变。
minmax() 的最小值才是换行临界点，不是 auto-fill/auto-fit
很多人以为换行由 auto-fill 或 auto-fit 决定，其实不是。真正决定“一排能放几个”的，是 minmax() 的第一个参数（最小宽度）和容器总宽的比值。
例如：minmax(240px, 1fr) 意味着单列不能窄于 240px。那 700px 容器最多放 floor(700 / 240) = 2 列；800px 就能放 3 列（3 × 240 = 720 ≤ 800）。
auto-fill 和 auto-fit 只影响“放不下时怎么办”：
-
auto-fill：强行建 3 列，第三列最小宽度 240px 占位，哪怕没内容 -
auto-fit：只建 2 列，把多出来的 700 − 480 = 220px 平均分给这两列 → 每列变成 350px
真正容易被忽略的是：你改了 minmax() 的最小值，却没同步检查 auto-fill/auto-fit 在不同断点下的轨道行为——尤其是中大屏下空轨道是否安静待命，还是直接消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
