auto-fill不填满容器是因为它只按最小宽度尽可能多建轨道，不收缩空轨道；auto-fit则会收缩空轨道并让有内容的列均分剩余空间，故响应式布局应优先用auto-fit+minmax(min,1fr)。
grid-template-columns: repeat(auto-fill, 1fr) 为什么没填满容器
因为 auto-fill 会尽可能多地创建轨道，即使没有子元素也会生成空轨道；但若容器宽度不足以容纳一个 1fr 轨道（比如内容区域太窄，或父容器被 fit-content 压缩），浏览器就无法渲染出任何轨道——看起来就是“没填满”，实际是轨道被跳过或尺寸坍缩为 0。
常见诱因包括：
- 父容器
width未显式设定，或被display: inline-grid/float/max-width隐式限制 - 子元素设置了
min-width或含长单词、图片等未约束内容，导致单个轨道最小宽度 > 容器可用空间 - 忘了加
min-width: 0在网格项上，flex/grid 内部默认的min-width: auto会阻止压缩
auto-fill 和 auto-fit 的行为差异到底在哪
auto-fill 和 auto-fit 都用于配合 repeat() 动态生成列，但分配逻辑完全不同：
-
auto-fill：先按minmax()中的最小值（如250px）尽可能多铺轨道，**不管有没有子元素**；空轨道仍占位，可能撑开容器 -
auto-fit：同样先铺满，但**会把所有空轨道收缩为 0**，再把释放出的空间按比例重新分给有内容的轨道
也就是说，auto-fit 才是真正实现“等比缩放”的关键——它让有内容的列能吃到空轨道让出的剩余空间，视觉上更均衡。而 auto-fill 更适合需要预留槽位的场景（如拖拽布局、模板占位）。
什么时候该用 auto-fill，什么时候必须用 auto-fit
选哪个不是看“顺口”，而是看容器是否允许空轨道存在、以及你是否希望它们参与空间分配：
- 用
auto-fill：需要固定列数占位（如仪表盘预设 4 栏，哪怕只放 1 个卡片也要留出空白区）；或配合grid-auto-flow: column实现横向滚动布局 - 用
auto-fit：要做响应式均分（如商品卡片列表、图标栅格），目标是“有多少内容就分多少份，空着的不占地方”；这是绝大多数等比缩放需求的真实解法 - 混用风险：写成
repeat(auto-fill, minmax(250px, 1fr)))却期望它自动收缩——错，auto-fill不会回收空轨道，1fr在空轨道里也无空间可分
为什么加了 auto-fit 还是不等宽
因为 auto-fit 只解决“轨道数量动态收缩”的问题，**不解决内容撑开轨道的问题**。如果某张卡片里有未折行的 URL、没设 max-width: 100% 的图片、或 input 没设 width: 100%，它照样会把所在列拉宽，破坏等比感。
必须同步做三件事：
- 网格项统一加
min-width: 0（解除 flex/grid 默认最小宽度保护） - 内部文本加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap或word-break: break-word - 图片强制
img { max-width: 100%; height: auto; display: block; }
真正容易被忽略的是：auto-fit 的效果完全依赖于“所有轨道的 minmax() 下限一致”。如果写成 minmax(200px, 1fr) minmax(300px, 1fr)，那两列天然就不等——auto-fit 不会帮你抹平这个差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
