auto-fit 会折叠空轨道，auto-fill 则保留所有轨道（含空白）。使用 auto-fit 配合 minmax 可实现动态隐藏空白格子，适用于卡片列表、响应式工具栏等场景；auto-fill 会导致空白占位和水平滚动。
auto-fill 和 auto-fit 的区别到底在哪
auto-fill 会尽可能多地创建重复轨道（即使对应网格区域为空），而 auto-fit 会在没有内容时折叠空轨道。很多人以为加了 auto-fill 就能“自动隐藏空白”，其实它恰恰相反——它会让空白格子也占位、渲染、响应式撑开。
常见错误现象是：用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 布局卡片，但数据不足时页面右侧出现大片空白，甚至触发水平滚动。
关键判断：想“隐藏空白格子”，必须用 auto-fit，不是 auto-fill。
为什么 auto-fit 能隐藏空白格子
auto-fit 在计算完所有可能轨道后，会把那些没分配到任何网格项的轨道尺寸设为 0px（视觉上消失），再把剩余空间重新按比例分配给有内容的轨道。
立即学习“前端免费学习笔记（深入）”；
使用场景包括：
- 卡片列表（如商品、文章缩略图）数量动态变化
- 响应式工具栏按钮数量不固定
- 表单字段组根据权限显示/隐藏部分字段
注意：这个行为只对显式未被占用的轨道生效；如果用了 grid-column 手动跨列，或通过 grid-area 指定了位置，该格子仍会被保留。
auto-fit 配合 minmax 的实际写法
最常用且可靠的写法是：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
但要注意几个参数细节：
-
minmax(250px, 1fr)中的250px是最小宽度，低于此值轨道不会生成（避免过窄） -
1fr是最大宽度，表示“剩余空间均分”，不是固定值 - 如果希望每行最多 4 列，可改用
minmax(250px, 1fr)+ 容器 max-width 控制，而不是硬写repeat(4, ...)
容易踩的坑：
- 在
grid-template-rows上误用auto-fit：它对行方向效果有限，因为浏览器通常无法预判内容高度 - 给网格项设置
visibility: hidden或display: none后，auto-fit不会重算——它只看 DOM 存在性，不看可见性
当内容真的为空时，如何彻底不渲染格子
auto-fit 解决的是“轨道空白”，但如果你的数据源返回的是空数组，那根本不需要 grid 布局介入。
更底层的控制逻辑应该是：
