CSS Grid + auto-fit + minmax() 是最稳定响应式图片网格解法，因它动态计算列数、避免留白与错位；配合 aspect-ratio 或 height+object-fit、loading="lazy"、srcset/sizes 精准配置及 figure 语义化包裹，可实现加载前预留空间、加载后不跳动、缩放不拉伸、换行不错位。
用 CSS Grid + auto-fit + minmax() 是目前最稳定、最易维护的响应式图片网格解法，比 flex-wrap 或 float 可靠得多，尤其在图片尺寸不一致或异步加载时。
为什么 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能自动适配列数
这行代码不是“画格子”，而是告诉浏览器：“每列至少 250px 宽，容器够宽就多加一列，剩余空间均分”。它动态计算列数，不依赖媒体查询，也不受图片原始尺寸干扰。
-
minmax(250px, 1fr)中的250px是单图最小可接受宽度，低于这个值就自动减少列数（比如从三列变两列） -
1fr让所有列平分剩余空间，避免右侧留白；用auto-fit而非auto-fill，能跳过空轨道，防止空白列占位 - 如果设成
minmax(300px, 1fr)但容器只有 580px 宽，浏览器会强制收为一列（因为两列最低需 600px），不会溢出或换行错位
图片本身怎么防拉伸、防抖动、防塌陷
光靠 Grid 布局不够，<img> 必须配合固定高宽逻辑和加载占位策略，否则滚动时卡片突然收缩、文字跳动是常态。
- 统一设
height: 200px+object-fit: cover：适合封面/海报类，裁两边保构图；若需完整显示（如 logo），改用object-fit: contain - 更现代的写法是
aspect-ratio: 4/3，但注意兼容性——Chrome 103+、Firefox 98+ 支持，Safari 15.4+ 开始支持；老浏览器需 fallback 到伪元素撑开或显式width/height属性 - 必须加
loading="lazy"和显式width/height（如<img width="300" height="200">），否则浏览器无法预留空间，加载前高度为 0，导致布局偏移（layout shift）
srcset 和 sizes 怎么配才不白写
只写 srcset 不写 sizes，等于没写——浏览器默认按 100vw 计算，小屏也可能加载大图，浪费带宽。
立即学习“前端免费学习笔记（深入）”；
-
sizes必须反映图片在 CSS 中的实际渲染宽度。例如 Grid 卡片每列占满容器，且有gap: 12px，那么三列时每张图实际宽度 ≈ (100vw - 24px) / 3，sizes应写成"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" -
srcset中每个资源后必须标注480w或2x，不能混用；480w表示该图源自然宽度为 480 像素，供浏览器结合sizes计算缩放比例 - 兜底的
<img src="fallback.jpg">必须存在且路径有效，否则<picture>场景下整块区域会空白
figure 包裹图说时容易漏掉的关键样式
<figcaption> 默认是块级元素，直接和 <img> 并列会导致错行、间隙失控，必须用语义化容器约束。
- 每张图和说明必须包在
<figure>内：<figure><img><figcaption>描述</figcaption></figure> - 对
<figure>设display: inline-block或display: flex，别用display: contents（Safari 旧版不支持） - 若用
inline-block，父容器要加font-size: 0消除 HTML 换行符产生的间隙；子元素里再把font-size调回来 - 标题文字居中建议用
display: flex; flex-direction: column; justify-content: center;，比text-align: center+line-height更可靠
真正难的不是写出能跑的代码，而是让每张图在任意设备上加载前就预留好空间、加载后不跳动、缩放时不拉伸、换行时不错位——这些细节全藏在 aspect-ratio 的降级、sizes 的精度、gap 与 margin 的边界选择里。
