应使用 figure 封装图单元并设 display: inline-block，配合 CSS Grid 布局（auto-fit + minmax）实现响应式图片网格，辅以 onerror 监控快速定位加载问题。
用 figure + display: inline-block 统一图单元结构
很多人把 <img> 和标题、按钮直接平铺写，结果布局错乱、换行失控。根本原因是没封装语义容器，导致浏览器对块级元素的默认行为干扰网格流。
正确做法是每个图单元用 <figure class="gallery-item"> 包裹 <img> 和 <figcaption>，再统一设样式：
-
.gallery-item { display: inline-block; width: 100%; vertical-align: top; }—— 兼容性好，Safari/IE 都稳 - 内部用
display: flex; flex-direction: column;垂直排列图片和标题，避免<figcaption>强制占满整行 - 操作按钮（删除/下载）用
position: absolute; top: 8px; right: 8px;，父容器必须加position: relative;
用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 替代 flex-wrap
Flex 布局在图片宽高比不一致或动态加载时，最后一行常出现左右空隙、列数突变、间隙不均等问题。Grid 的二维控制能力更适合图片网格。
核心声明必须写全：
立即学习“前端免费学习笔记（深入）”；
display: grid;-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));——250px是最小列宽，1fr表示等分剩余空间 -
gap: 12px;（不是margin）—— IE 不支持gap时，改用grid-column-gap和grid-row-gap - 若图片比例差异大，加
aspect-ratio: 4/3;或外层包<div>并设overflow: hidden;
监听 onerror 快速定位路径错误
本地开发时图片不显示，光靠 alt 文字看不出是路径错还是文件真丢了。JS 层补监控是最直接的排查手段。
- 单张图：
<img src="xxx.jpg" onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;"> - 批量处理：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => console.warn('图片加载失败:', e.target.src))); - 开发阶段快速扫描：在控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有“假图” - 路径建议全用相对路径，且统一从 HTML 文件所在目录起算；避免混用
./images/和images/，否则入口页位置一变就全挂
用 <picture> + srcset 控制资源加载粒度
不是所有图片都需要高清加载。响应式场景下，盲目塞大图会拖慢首屏，而只用一张图又会在 Retina 屏上发虚。
- 基础响应式：
<img src="fallback.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - 设备像素比适配：
<img src="normal.jpg" srcset="retina.jpg 2x"> - 多条件切换（推荐用于画廊）：
<picture><source media="(min-width: 1024px)" srcset="large.webp"><source type="image/webp" srcset="small.webp"><img src="small.jpg" alt="..."></picture> - 注意：
sizes必须配合srcset使用，否则浏览器无法预估所需宽度，可能选错资源
真正卡住开发节奏的，往往不是功能写不出，而是图片一出错就要切编辑器查路径、开控制台翻 Network、手动清缓存。把 onerror 监控、figure 封装、grid 布局这三件事固化成项目模板，后续新增图单元几乎零调试成本。
