auto-fill 配 minmax(250px, 1fr) 最稳：auto-fill 预占位不塌缩，1fr 为弹性上限，配合 aspect-ratio 和 object-fit 才能防图片变形，响应式优先，ie11 需 @supports 降级。
grid-template-columns 里 auto-fill 和 minmax 怎么配才不塌
直接说结论：auto-fill 配 minmax(250px, 1fr) 是最稳的起手式，不是 auto-fit，也不是 minmax(250px, 2fr)。
常见错误是写成 minmax(250px, 1fr) 却用 auto-fit——它会把空列撑满，导致最后一行图片被强行拉宽变形；或者用 minmax(300px, 1fr) 但容器宽度不够，结果一行只塞下 1 张图，留大片空白。
-
auto-fill会按最小尺寸（如250px）尽可能多列地“预占位”，哪怕没内容也留空格，后续靠justify-items或grid-auto-flow控制对齐 -
minmax(250px, 1fr)的1fr是上限，但实际每列宽度由容器均分决定，不是“每个都占满一整份” - 图片本身没设
width: 100%或object-fit，网格再准也没用——列宽变了，图还卡着原始尺寸
图片变形、溢出或留白太多，大概率是没处理 aspect-ratio 和 object-fit
Grid 只管布局，不管图片怎么缩放。常见现象：小屏下图片被压扁、大图边缘被裁、列宽变窄后图片高度突兀拉长。
必须加两层控制：
立即学习“前端免费学习笔记（深入）”；
- 给图片容器（比如
<figure></figure>或<div>）设 <code>aspect-ratio: 4/3或aspect-ratio: 1/1，强制维持比例 - 图片本身加
width: 100%; height: 100%; object-fit: cover;，否则aspect-ratio不生效 - 别依赖
img { max-width: 100% }——它只约束宽度，高度自由，一缩就失真 - 设计要求严格分界（比如“768px 以上必须 3 列，不准 2.5 列”）
- 要配合其他布局变化（比如侧边栏出现时，图片网格从 4 列缩到 3 列）
- 用
clamp()替代minmax()做更细粒度缩放（例如minmax(clamp(200px, 25vw, 350px), 1fr)），但兼容性要注意
响应断点要不要写 media query？多数情况不用
用 minmax() + auto-fill 本身就有响应性，只要最小宽度选得合理（比如 250px 对应手机横屏，350px 对应平板），就能在 320px–1200px 范围内自动从 1 列→2 列→3 列→4 列平滑过渡。
只有两种情况才需要 media query：
IE 不支持怎么办？别硬扛，用 feature query 降级
IE11 不认 auto-fill、minmax，也不支持 aspect-ratio。强行 polyfill 代价高、效果差。
稳妥做法是用 @supports 隔离现代写法，并给老浏览器 fallback：
section.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@supports (display: grid) and (grid-template-columns: subgrid) {
section.gallery {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)));
}
}
注意：@supports 里不能只写 display: grid，因为 IE11 也认这个，得加个它不支持的特性（比如 subgrid 或 aspect-ratio）当开关。
真正容易被忽略的是：Grid 布局一旦启用，就别混用 float 或 inline-block 降级方案——它们共存时行为不可控，尤其在动态插入图片时。
