auto-fill保留空轨道并参与1fr分配，auto-fit丢弃空轨道仅按内容建列；前者适合需预留插槽或JS控制的场景，后者适合内容填满的流式布局。
auto-fill 和 auto-fit 看起来只差一个字母，但行为完全不同：前者会保留空轨道，后者直接丢弃它——这不是“效果微调”，而是布局计算逻辑的分水岭。
auto-fill 为什么总多出一列空白？
当你写 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))，浏览器先算“最多能塞几列”：比如容器宽 700px，250px 是最小宽度，700 ÷ 250 = 2.8 → 向下取整得 2 列？错，auto-fill 是向上试探——它尝试放 3 列（3 × 250 = 750 > 700），发现超了，但仍会创建这第 3 列，只是把它的尺寸压到不足 250px（比如 200px），并真实占位。
- 空轨道参与
1fr分配：3 列均分 700px，每列 ≈ 233px，内容被压缩、换行或右侧留白 - JS 控制
grid-column时，若目标列不存在（比如想定位第 4 列），auto-fill因预建轨道而生效，auto-fit则可能失效 - 小屏临界点易跳变：容器从 499px → 500px，
minmax(250px, 1fr)可能突然从 1 列 → 2 列，再 → 3 列
auto-fit 为什么内容总是撑满？
auto-fit 不预设列数，它只看“有多少子元素”，然后按需建列。还是 700px 容器 + minmax(250px, 1fr) + 2 个子元素：它只建 2 列，剩余空间（700 − 2×250 = 200px）全部均分给这 2 列 → 每列 ≈ 350px，内容舒展无挤压。
- 空轨道不参与任何计算：没有“第 3 列”的概念，也就没有留白或压缩
- 列数随内容数量动态变化：3 个子元素 → 3 列，删掉 1 个 → 自动变成 2 列，布局可能跳变
- 适合卡片/按钮/图片等数量不确定的流式场景，但不适合依赖固定列数做对齐或动画的 UI
怎么选？关键看你要不要“轨道存在性”
不是“哪个更美观”，而是“轨道是否必须物理存在”：
立即学习“前端免费学习笔记（深入）”；
- 需要预留插槽（如仪表盘 widget 区、表单字段组左右对齐基准）、或 JS 动态控制某列显隐 → 用
auto-fill - 只要内容填满、列数无所谓（如商品列表、相册网格、响应式导航按钮）→ 用
auto-fit - 两者在容器宽度 ≤ 子元素最小宽度总和时行为一致（比如 2 个元素 × 250px = 500px，容器宽 480px → 都换行，无空轨道问题）
最常被忽略的是：空轨道是否参与 1fr 分配——auto-fill 中它真占位、真分空间；auto-fit 中它根本不存在。调试时盯着容器宽度和 minmax() 最小值的关系，比看最终效果更管用。
