直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能跑通，但只写这一行必出问题——塌陷、错位、跳动、拉伸全都会来，根源不在 grid 语法，而在图片容器没约束、宽高比没预设、gap 没响应。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能跑通，但只写这一行必出问题——塌陷、错位、跳动、拉伸全都会来，根源不在 Grid 语法，而在图片容器没约束、宽高比没预设、gap 没响应。
为什么 auto-fit 比 auto-fill 更适合真实图片画廊
auto-fit 会把空列合并，让有图的列拉伸填满整行；auto-fill 则保留所有可能列位（包括空列），导致最后一行图片被挤偏或整体右移。画廊是内容驱动的，不是棋盘，空列没有语义价值。
- 混排 4:3 和 1:1 图片时，
auto-fill+justify-content: center会让整行向右漂移，因为空列也占空间 -
auto-fit在只有一张图时自动撑满，适配移动端首屏聚焦需求 - 安卓 WebView 对
auto-fill的轨道计算更不稳定，auto-fit兼容性实测更稳
图片变形/裁剪失控的三个硬性条件
不是 object-fit 不生效，而是它根本没被触发——img 默认不响应父容器尺寸变化，必须同时满足三者：
-
img必须设width: 100%和height: 100%（缺一不可） - 其父容器（即 Grid 项）必须有明确高度参照，比如
aspect-ratio: 4/3或min-height: 150px - 不能对
img直接设固定height，否则破坏响应性；aspect-ratio必须写在父容器上，Safari 16.4+ 才支持，旧版需降级
gap 怎么写才真响应，不靠媒体查询
固定 gap: 1rem 在小屏上太占空间，纯百分比又不被支持。clamp() 是目前唯一轻量可靠的方案：
- 用
gap: clamp(0.5rem, 3vw, 1rem)：小屏最小 0.5rem，中屏随视口缩放，大屏封顶 1rem - 别单独设
row-gap或column-gap，除非你明确需要行列间距不同 - 如果父容器有
padding: 1rem，再配gap: 1rem，视觉边缘就是 2rem，得提前协调
图片加载前防跳动的两个不可妥协动作
懒加载或弱网下，img 高度为 0，Grid 行高塌陷，后续所有图片错位——这不是样式问题，是 DOM 渲染时机问题。
- 每个
.gallery-item（即img的父容器）必须设min-height: 150px（略大于你设定的aspect-ratio对应高度） -
img标签里必须带width和height属性（如width="800" height="600"），让浏览器提前预留空间 - 别依赖 JS 监听
load事件再重排——用户已看到跳动，补救太晚
真正卡住多数人的，从来不是 repeat() 怎么写，而是容器没宽高参照、图片没包裹层、gap 没随视口缩放、加载前没预留空间——四个点漏一个，画廊就崩一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
