auto-fit会丢弃空轨道使子项拉伸填满容器，auto-fill则保留所有可容纳的轨道导致留白；前者按子元素数量建列并均分空间，后者按容器宽度硬算最大列数并预留空位。
auto-fit 和 auto-fill 的区别到底在哪
auto-fit 和 auto-fill 看起来只是拼写差一个字母，但行为差异直接影响图片网格是否“响应”得合理。关键在于：当轨道为空时，auto-fit 会收缩空轨道，而 auto-fill 会保留所有生成的轨道（哪怕没内容）。
这在图片数量少于网格列数时特别明显——比如你设了 repeat(auto-fit, minmax(250px, 1fr)))，但只放了 2 张图，auto-fit 会让这两张图占满整行并自适应拉宽；auto-fill 则可能留下几个空白列，破坏视觉连贯性。
常见错误是复制教程代码却没换掉 auto-fill，结果小屏下出现诡异留白或横向滚动。
minmax(250px, 1fr) 这个写法为什么常被推荐
这个 minmax() 是让 auto-fit 发挥作用的核心约束：最小宽度防压缩过小（比如图片糊掉），最大用 1fr 让剩余空间均分。
注意点：
-
250px不是固定值，要根据你的图片最小可读尺寸调整；手机端可能得降到160px或用min(160px, 25vw) - 别写成
minmax(250px, 1fr)却忘了加grid-auto-flow: dense——当图片高度不一致时，空缺位置不会自动填充，网格会出现断层 -
1fr在单行内是“等分剩余空间”，不是“固定宽度”，所以它天然适配不同屏幕，不需要媒体查询就能初步响应
图片本身怎么避免拉伸变形
Grid 控制的是容器布局，图片是否变形取决于它自己。最稳妥的做法是给图片加：
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，按需选 */
display: block;
}
漏掉 display: block 可能导致底部多出几像素空白（inline 元素默认 baseline 对齐）；不用 object-fit 而只设宽高，图片会被强行拉伸。
如果图片需要保持原始宽高比且居中显示，object-fit: cover + object-position: center 是标配；若必须完整显示（比如信息图），就换 contain，但要注意留白问题。
IE 不支持 auto-fit？那怎么办
auto-fit 在 IE 中完全不识别，会直接退化为 repeat(1, ...) 或报错，整个网格失效。
现实方案只有两个：
- 放弃 IE（现在多数项目已可行）
- 用 @supports 检测并提供降级：
@supports not (grid-template-columns: repeat(auto-fit, 1fr))) { .grid { display: flex; flex-wrap: wrap; } .grid-item { flex: 1 1 250px; } }
别试图用 JavaScript 动态计算列数来模拟——性能差、闪屏、且无法响应浏览器缩放。CSS Grid 的响应逻辑是声明式的，硬套命令式思路反而绕远。
真正难的不是写出那行 repeat(auto-fit, minmax(...))，而是想清楚图片最小可接受宽度、是否允许裁剪、以及用户真正在什么设备上以什么姿势看这些图。这些决定了 minmax() 里的两个值怎么取，而不是抄个 250px 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
