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))，当容器宽 500px 时生成 3 列（600px 总宽），第 3 列为空；而 auto-fit 同样写法下只保留前 2 列，剩余空间由这 2 列均分（各占 250px）。
什么时候该选 auto-fill
需要严格对齐、预留位置或配合 :nth-child 做样式控制时，auto-fill 更可靠。比如卡片列表要保持每行固定列数视觉节奏，哪怕最后一行不满也要留白。
- 适合做“栅格系统基底”，例如
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))配合grid-auto-rows: 120px - 和
grid-column-end: -1这类定位配合更稳定，因轨道数量可预期 - 注意：若子元素少于生成的轨道数，会出现大量空单元格，可能影响 tab 键序或屏幕阅读器体验
auto-fit 的真实适用场景和陷阱
auto-fit 表面更“智能”，但容易在动态内容中出问题——比如 JS 插入新元素后，浏览器未必立刻重算轨道，导致布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 最适合静态内容或内容一次性渲染完成的场景，如 CMS 页面的图库、产品列表
- 不能依赖它实现“等分布局”+“固定最小宽度”的混合需求：一旦容器宽度小于单个
minmax()的最小值，整行会坍缩成 0 高度（需配合min-height或媒体查询兜底） - 与
justify-content: center搭配时，空轨道被收走后，剩余项才居中；但若你期望“整行居中”，得改用margin: 0 auto包裹 grid 容器
性能和兼容性要注意什么
两者都依赖浏览器实时计算轨道数量，频繁 resize 或大量 grid 子项下，auto-fit 触发重布局的代价略高——因为每次都要判断哪些轨道该收缩。
- IE 完全不支持
auto-fill/auto-fit，必须降级为固定列数或 JS 计算 - 旧版 Safari（≤15.4）对
auto-fit在嵌套 grid 中有渲染异常，建议外层用auto-fill，内层用显式repeat(3, 1fr) - 真正影响性能的不是关键字本身，而是
minmax()里用了fr单位：每多一个fr，浏览器就要多一轮分配计算，3 列以上建议用1fr 1fr 1fr替代repeat(3, 1fr)
auto-fit 看似省事，但它的“自动”是基于当前尺寸快照的，不响应内容变化；真要动态适配，往往得加一层 JS 监听 resize 或用 @container 查询补位。 
