auto-fill 不适合自适应列表，它会创建空轨道导致留白或滚动；应改用 auto-fit，其自动收缩空轨道并让非空轨道均分容器宽度。
auto-fill 本身不实现“自适应列表”——它只负责尽可能多地预留轨道，不管有没有内容。想靠它让卡片自动撑满容器、随屏幕缩放列数，大概率会遇到右侧留白、横向滚动、列宽被虚占等问题。
为什么 auto-fill 在列表场景下容易出问题
它按 minmax() 下限（比如 250px）暴力计算理论最大列数，并全部生成轨道。哪怕只有 2 个子项，也会建出 4 条轨道，其中空轨道仍参与 gap 计算、仍占用空间：
- 小屏下容易触发
overflow-x: scroll，尤其父容器没设overflow-x: hidden - 子项少时列数“虚高”，视觉上格子比内容多，不像自适应，像卡顿
- 和
grid-auto-flow: column混用会错乱：内容从上往下灌进第一列，不是横向换行 - 浏览器 DevTools 里看到
grid-column-end是 5，但只渲染了 2 个子项——空轨道不可见但真实存在
什么情况下才该用 auto-fill 做列表
仅当你要的是“物理占位”，且明确需要轨道数量恒定、后续会动态插入内容：
- 仪表盘拖拽区：提前声明
4×4网格，空槽位必须可见可拖入 - 像素画布或棋盘类 UI：每个单元格尺寸严格一致（如
minmax(16px, 16px)），不能合并 - 配合
grid-auto-flow: column做垂直瀑布流，且要求列数不随内容增减（例如相册按列分组）
minmax() 写错，auto-fill 直接失效
minmax() 第一个参数是轨道最小可取值，第二个是单轨道最大可取份额。写错就失去弹性约束，浏览器静默降级为 max-content：
- ❌
minmax(250px, 2fr)：fr单位在 max 位置非法，退化为max-content - ❌
minmax(1px, 1fr)：浏览器有最小轨道限制（通常 ≥10px），实际可能只生成 1 列 - ✅ 正确写法只有
minmax(或, 1fr) minmax(, max-content)
真要列表自适应，请直接切到 auto-fit
把 auto-fill 换成 auto-fit 是最轻量、最可靠的修复。它会在生成轨道后，把没内容的空轨道尺寸设为 0，再让非空轨道用 1fr 平分剩余空间：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
这行代码就能让 1 个卡片占满一行、2 个卡片平分、4 个卡片四等分——无需媒体查询，也不依赖 JS。唯一要注意的是：
- 子项不能设
width、不能float、不能position: absolute - 父容器要有明确宽度（比如
width: 100%或在 flex 容器中设flex: 1） - 别用
margin模拟间隙，必须用gap；否则minmax()的最小值会失效
真正容易被忽略的是：1fr 总是相对于整个容器宽度计算，不是当前行。所以当某行只有 1 个子项，它会占满整行宽度——但这个“整行”就是容器全宽，不是你直觉里的“这一行剩余宽度”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
