Grid 布局需四层约束：包裹层设 aspect-ratio 与 min-height、img 带 width/height 属性、gap 用 clamp() 响应、统一 gallery-item 比例并用 object-fit 裁剪。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 肯定跑不通——它连最基础的图片不塌陷都做不到，更别说防跳动、控比例、适配弱网。
为什么 auto-fit + minmax() 会塌陷或错位
不是语法错了，是 Grid 只分配了宽度，没管高度。当图片加载前高度为 0，Grid 行高塌成一条线，后续所有格子全错位。常见现象包括：首屏加载时图片“唰一下往下掉”、混排 4:3 和 1:1 图片时整行右偏、安卓 WebView 中列数卡死不变。
-
auto-fit会合并空轨道，让有图的列拉伸填满——这在内容不均时反而放大变形 -
minmax(250px, 1fr)的1fr是上限，不是目标；实际列宽 = 容器总宽 ÷ 列数，而列数由250px是否能塞下决定 - iPhone SE 屏宽仅 375px，减去左右 padding 和 gap 后，
250px已逼近极限，极易退化为单列但留大片空白
必须加的四个容器层约束
Grid 控布局，但图片不变形、不跳动、不拉伸，全靠包裹层。只样式化 img 标签本身，90% 的问题都出在这儿。
- 每个图片必须包一层
<div class="gallery-item">或<figure> -
.gallery-item必须设aspect-ratio: 4/3（或你期望的比例），不能写在img上 -
.gallery-item必须有min-height: 150px（略大于aspect-ratio对应高度），防加载前塌陷 -
img标签必须带width和height属性（如width="800" height="600"），让浏览器提前预留空间
gap 怎么写才真响应，不靠媒体查询
固定 gap: 1rem 在小屏上占视觉比重太大，纯百分比又不被支持。硬编码断点反而增加维护成本。
- 用
gap: clamp(0.5rem, 3vw, 1rem)：小屏最小 0.5rem，中屏随视口缩放，大屏封顶 1rem - 别单独设
row-gap或column-gap，除非你明确需要行列间距不同 - 如果父容器有
padding: 1rem，再配gap: 1rem，边缘视觉间距就是 2rem，得提前协调 - Safari 15.4+ 才完整支持
clamp()，旧版可降级为gap: 0.75rem
混排不同宽高比图片时怎么稳住网格
直接丢一堆 16:9、4:3、1:1 的图进去，auto-fit 会让窄图被拉宽、高图被多裁，auto-fill 又容易留空列漂移。真实项目里，没人能保证后端返回的图尺寸统一。
立即学习“前端免费学习笔记（深入）”；
- 优先用
auto-fill+ 明确最小宽度（如minmax(240px, 1fr)），它按最小值预占等宽轨道，结构更稳定 - 每张图的
.gallery-item都设相同aspect-ratio（比如统一 4/3），内部用object-fit: cover裁剪 - 避免对
img直接设height，否则在高 DPR 设备下易出现像素断裂 - 别用
background-image模拟——语义丢失，SEO 和可访问性受损
repeat() 怎么写，而是容器没宽高参照、图片没包裹层、gap 没随视口缩放、加载前没预留空间——四个点漏一个，画廊就崩。 
