绝大多数图片画廊应使用 auto-fit，因其会合并空轨道使内容拉伸填满容器，避免右侧留白；auto-fill 则保留空轨道导致布局松散、图片挤压或横向滚动。
grid-template-columns 用 auto-fit 还是 auto-fill？
绝大多数图片画廊该用 auto-fit，不是 auto-fill。两者都出现在 repeat() 里，但行为差一截：auto-fill 会硬生生把空轨道也占出来，导致右侧留白；auto-fit 则直接把已有项目拉伸填满，视觉更紧凑。
常见错误是复制了别人用 auto-fill 的代码，结果在小屏或图少时右边大片空白。除非你明确需要“预留列位”（比如配合 :nth-child(3n) 做特殊样式），否则默认选 auto-fit。
-
repeat(auto-fit, minmax(250px, 1fr))是安全起点，250px 是单图最小可读宽度（含gap） - 容器必须有明确宽度（如
width: 100%或max-width），否则minmax()没参照，Grid 不知道“250px”相对于谁 - 别写成
minmax(200px, 1fr)并指望它“自动均分”——1fr在这里只是最大上限，实际列宽由内容和容器共同决定
gap 和 object-fit 怎么配才不翻车？
gap 是唯一推荐的间距控制方式，别再给 img 加 margin。它自动处理行列间隙，不会塌陷、不干扰 Grid 轨道计算。但注意：固定值 gap: 16px 在小屏上容易显得压迫，尤其当列数变少时。
object-fit: cover 必须配合固定比例容器，否则竖图横图混排时会撑高整行。只对 img 设这个属性没用，因为图片本身没有宽高约束。
- 给每个图片外层包一层
div，设aspect-ratio: 4/3或1/1（按你画廊风格定） -
img写width: 100%; height: 100%; object-fit: cover;，确保填满且不拉伸 - 小屏下用
gap: clamp(0.5rem, 2vw, 1rem)替代固定值，Safari 15.4+ 支持；旧版 Safari 降级为gap: 0.75rem
为什么图片高度不一致？根本不在 grid 上
Grid 只管“怎么摆”，不管“摆什么”。高度不一致从来不是 grid-template-rows 的问题，而是子项内容没约束。一张 800×1200 的竖图，会直接撑高所在行，连带整行其他图都被拉高——这是 grid-auto-rows 默认行为，不是 bug。
解决思路很直接：不让图片自己决定高度，而是由容器“框死”比例。
- 绝对不要对
img直接设height（比如height: 200px），DPR 不同的设备上会像素断裂 - 避免用
background-image模拟图片——丢失语义、无法右键保存、SEO 友好度归零 - 如果必须混排视频，同样套
aspect-ratio+object-fit: cover，video标签支持这些属性
兼容性要兜底到哪一步？
现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）都支持 display: grid 和 auto-fit，但 IE 完全不认。真要支持 IE，得用降级方案，而不是靠 Polyfill 硬扛。
关键不是“能不能用 Grid”，而是“降级后用户还能不能看图”。最务实的做法是用 @supports 区分，而非全局 fallback。
- 用
@supports (display: grid)包住 Grid 样式，里面写完整逻辑 - 外面写流式布局（
display: flex; flex-wrap: wrap）或column-count，保证图片能显示，只是不那么整齐 - 图片资源加
srcset，配合loading="lazy"，Grid 布局本身不解决加载性能，别指望它自动优化
真正容易被忽略的是：Grid 布局生效的前提，是父容器有明确宽度，且子项是直接子元素。如果中间多了一层 div 或用了 ng-if 类指令，grid-column 这类属性就失效了——查不到元素，不是代码写错，是结构没对上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
