必须用auto-fit，auto-fill在小屏下会保留空轨道导致右侧留白或横向滚动；auto-fit则收缩空轨道使卡片均分容器宽度，正确写法为grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。
grid-template-columns 用 auto-fit 还是 auto-fill？
必须用 auto-fit，auto-fill 在小屏下会留空列，导致最后一行只有一张图却撑出两格空白。现象是：手机上图片错位、右侧大片留白、甚至横向滚动。原因在于 auto-fill 强制填满所有可用空间，不管有没有内容；而 auto-fit 会把无内容的轨道收缩掉，让剩余列均分容器宽度。
正确写法只有一种：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。这个值在不同宽度下表现稳定：
- 375px 宽（iPhone SE）→ 只渲染 1 列，不占位
- 768px（iPad 竖屏）→ 自动变成 2 列，每列约 360px
- 1200px+ → 最多铺开 4–5 列，且不留空
图片变形或高度不齐？先查 aspect-ratio 和 object-fit 生效条件
object-fit: cover 失效，90% 是因为 <img> 没有明确的高度上下文。直接写 width: 100%; height: auto，浏览器无法推导裁剪区域，cover 就被忽略。
真正起作用的组合只有两种：
- 给网格项（如
.gallery-item）设aspect-ratio: 4/3，再让<img>用width: 100%; height: 100%; object-fit: cover - 或者更简单：给网格项设固定高（如
height: 200px），加overflow: hidden，再让<img>填满
别单独给 <img> 设 height——不同图片原始高宽比不同，会撑开各行，破坏网格对齐。
gap 和 margin 混用会出什么问题？
用 gap 控制网格间距是唯一干净方案。margin 在网格里会触发外边距合并、首尾漏间隙、还需额外清除，尤其当画廊项用 display: contents 或动态增删时，margin 行为完全不可控。
gap 的优势很实在：
- 原生支持，不触发重排，滚动性能好
- 一行代码同时控制行距和列距（
gap: 12px） - 兼容性足够：现代浏览器全支持，旧版 Safari 可加回退
grid-gap: 12px
注意：如果容器本身有 padding: 16px，别为了“视觉等距”把 gap 改成 8px——那会导致图片离边框太近，实际留白反而不一致。
hover 缩放卡顿？别碰 width/height
对 <img> 直接改 width 或 height 会触发 layout，尤其在滚动中 hover，帧率明显下降。解决方案只有一个：只用 transform: scale()。
但必须配齐两个条件：
- 父容器（如
.gallery-item）加overflow: hidden，否则放大后图片溢出 - 加
will-change: transform要谨慎——仅在画廊项超 50 个且 hover 频繁时启用，否则可能增加内存开销
另外，<img> 默认是 inline 元素，带文字基线间隙，会导致网格行高异常。统一设 display: block，这是截至 2026 年仍被忽略的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
