auto-fit 必须与 minmax() 配合使用，因 auto-fit 仅合并空轨道而不定义列宽；minmax(250px, 1fr) 设定最小列宽并启用弹性分配，配合容器显式宽度、aspect-ratio 容器包裹及 gap 间距，才能实现稳定响应式画廊。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能跑通，但必须配 aspect-ratio 和容器包裹，否则图片会错位、拉伸或留白——这不是 CSS 写得不够多的问题，而是结构层级没对。
为什么 auto-fit 必须和 minmax() 一起用
auto-fit 本身不决定列宽，它只负责“合并空轨道”。没有 minmax()，浏览器根本不知道单列该多宽，整个 repeat() 声明会静默失效，退化为单列。
-
minmax(250px, 1fr)中的250px是底线：iPhone SE（375px 宽）减去左右 padding 和gap后，刚好容得下 1 列；设成300px就卡死不动 -
1fr不是“填满”，而是参与均分的弹性单位；如果混写2fr或固定值，列宽比例就乱了，auto-fit失去意义 - 别写
repeat(auto-fit, 200px)——这是无效语法，DevTools 里会标黄警告，但页面可能看似正常，实则列数已冻结
aspect-ratio 必须加在图片容器上，不是 <img> 标签本身
只给 <img> 设 width: 100%; height: auto; 没用。Grid 分配的是列宽，高度由内容撑开；图高矮不一，整行会被最高那张顶高，下面的行就错位。
- 每个图片项要用语义化容器包裹，比如
<figure class="gallery-item"></figure> - 在
.gallery-item上设aspect-ratio: 4/3;（或你实际图的常见比例），再加overflow: hidden; -
<img>内部设width: 100%; height: 100%; object-fit: cover;—— 这样aspect-ratio才生效 - 旧浏览器不支持
aspect-ratio？先用padding-top: 75%;+position: relative+absolute子元素兜底
父容器宽度不明确，auto-fit 就算写对也白搭
auto-fit 的计算完全依赖容器的可用宽度。如果父级是 inline-grid、被 float 拉偏、或 width 未显式声明，它就看不到“缩放基础”，列数永远卡在初始值。
- 调试时第一件事：给网格容器加
outline: 1px solid red;，看 DevTools 里 computed 的width是否符合预期 - 确保父容器有明确宽度来源：比如
width: 100%、max-width: 1200px，或处于正常块级流中 - 避免
box-sizing: content-box导致padding或border溢出minmax()最小值，实际列宽超限后浏览器被迫换行，auto-fit节奏全乱 - 子项若用了
grid-column: span 2，会打断自动填充顺序，优先检查所有子项是否靠源顺序自然流入
gap 是唯一安全的间距控制方式，margin 在 Grid 里会埋雷
用 margin 控制图片间距，在不同列数切换时极易错位。尤其当最后一行不满格，margin-right 可能把最后一张图顶出容器，或触发外边距合并。
- 统一用
gap: 12px;（别写grid-gap，已过时） -
gap会自动处理行列间距，且不参与尺寸计算，不会影响minmax()判定 - 如果需要首尾不留空，别动
gap，改用padding包裹整个网格容器 - 不要给
<img>单独设margin，哪怕只是想微调——它和 Grid 的布局模型不在同一层
最常被忽略的点：响应式画廊不是“让图片变小”，而是让**网格结构稳定可预测**。auto-fit 看似聪明，但它只响应宽度，不理解图片内容；真正防变形、防错位、防跳动的，是容器层的 aspect-ratio + object-fit + 显式宽度约束这三者的配合。漏掉任意一环，小屏上就会出现一张图胖、一张图瘦、一行高、一行矮的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
