真正能自适应的写法是repeat(auto-fit, minmax(250px, 1fr))：auto-fit自动收缩空列使剩余列均分容器宽，避免小屏溢出或留白；auto-fill则保留空列导致布局错乱，且需配合aspect-ratio和object-fit防图片变形。
grid-template-columns 写错一行，小屏就溢出或留大片空白——真正能自适应的写法只有一种：用 repeat(auto-fit, minmax(250px, 1fr))，不是 auto-fill，也不是固定列数。
为什么必须用 auto-fit 而不是 auto-fill
auto-fill 会强行填满所有可用空间，哪怕后面没内容，也会留下空列；auto-fit 则自动收缩无内容的列，让剩余列拉伸占满。手机上列数少、图片宽高比不一，auto-fill 容易导致最后一行只剩一张图却还空着两格。
- 小屏（如 375px 宽）下：
minmax(250px, 1fr)→ 最多只能塞下 1 列，auto-fit就只渲染 1 列，不占位 - 中屏（如 768px）→ 自动变成 2 列，每列约 360px 宽
- 大屏（1200px+）→ 可达 4–5 列，但不会因空缺而撑开布局
object-fit: cover 失效？先检查父容器有没有显式高度
object-fit 不是万能胶——它只在元素有明确宽高时才生效。直接给 <img> 设 width: 100% 和 height: auto，cover 会被忽略，图片仍会拉伸或留白。
- 正确做法：给每个网格项（如
.gallery-item）设aspect-ratio: 4/3或padding-top: 75%+position: relative，再让<img>绝对定位填满 - 更简单方案：设
height: 200px（固定值），再配overflow: hidden，避免裁剪错位 - 别在
<img>上单独设height，否则不同图片会撑开各行高度，破坏网格对齐
gap 比 margin 更干净，但别和 padding 混用
gap 是网格原生间距控制，不触发重排、不塌陷、不依赖子元素 display 类型；而用 margin 做间隔，容易在首尾/行列交界处漏掉空隙，还得额外清除。
- 统一用
gap: 12px即可同时控制行距和列距 - 如果容器本身有
padding: 16px，别为了“视觉等距”把gap改成8px——那会导致图片离边框太近，实际留白不一致 - 旧版 Safari（gap，可加回退：
grid-gap: 12px（已废弃但兼容性好）
hover 缩放卡顿？别动 width/height，只用 transform
对 <img> 直接改 width 或 height 会触发 layout，滚动时明显掉帧；transform: scale() 是合成层操作，性能好得多。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
overflow: hidden在父容器（.gallery-item）上，否则放大后图片会溢出 - 加
will-change: transform只在必要时启用（比如画廊项很多且 hover 频繁），否则可能增加内存开销 - 别给
<img>设display: inline或默认值——它会带文字基线间隙，导致网格行高异常；统一设display: block
auto-fit 的行为差异、object-fit 的生效前提、gap 的语义边界——这些细节一旦漏掉一个，响应式就变成“看起来像响应式”。 
