CSS Grid 用 auto-fit 与 minmax() 实现响应式图片网格，避免 flex-wrap 断行错位；用 figure 包裹图文并设 display: inline-block 保证布局；图片错误监听 onerror 降级，dialog 实现轻量预览，状态同步优先 class 切换。
用 CSS Grid 实现响应式图片网格，避免 flex-wrap 的断行错位
直接用 display: flex + flex-wrap: wrap 排多图，常遇到最后一行图片数量少、左右不对齐、间隙不均的问题——尤其在动态加载或图片尺寸不一致时。Grid 天然支持二维布局，auto-fit 和 minmax() 组合能自动适配容器宽度，比 flex 更可控。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))是核心：每列最小 250px，超出则自动新增一列，填满整行 - 必须加
gap（不是margin），否则图片间空隙靠边距模拟会破坏网格对齐逻辑 - 若图片宽高比差异大，建议统一用
aspect-ratio: 4/3或包裹一层div并设overflow: hidden防止拉伸变形 - IE 不支持
gap，如需兼容，改用grid-column-gap+grid-row-gap（仅 IE10+）
给每张图加标题和操作按钮，但不破坏网格流
很多人直接把 <figcaption> 跟 <img> 并列写，结果发现每组占满一行——因为 <figcaption> 默认是块级元素，会强制换行。真正干净的做法是用语义化 <figure> 包裹，再统一控制其显示行为。
- 每个图单元用
<figure class="gallery-item">包裹<img>和<figcaption> - CSS 中设
.gallery-item { display: contents; }可让<figure>不产生盒模型，但注意 Safari 旧版不支持 - 更稳妥方案：设
.gallery-item { display: inline-block; width: 100%; vertical-align: top; }，再内部用 flex 垂直居中标题 - 操作按钮（如删除、下载）建议用绝对定位放在右上角：
position: absolute; top: 8px; right: 8px;，父容器需position: relative;
图片路径出错时如何优雅降级并快速定位
本地开发时路径写错很常见，<img> 加了 alt 也只显示文字，看不出是路径问题还是图片真缺失。得靠 JS 补一手监控。
- 监听
onerror事件：<img src="xxx.jpg" onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;"> - 批量处理可用
document.querySelectorAll('img').forEach(img => { img.addEventListener('error', ...)}); - 开发阶段可在控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0)快速找出所有加载失败的图片 - 路径建议全用相对路径，且统一从 HTML 文件所在目录算起；避免混用
./images/和images/，容易因入口 HTML 位置不同而失效
缩略图预览与点击放大，别用插件硬套
很多教程一上来就推 lightbox 插件，但实际只需原生 CSS + 少量 JS 就能实现轻量预览。重点在于不要阻塞图片加载，也不要污染全局样式。
立即学习“前端免费学习笔记（深入）”；
- 缩略图保持原图分辨率，但用
width/height+object-fit: cover控制显示区域 - 点击后用
dialog元素弹出大图：<dialog id="preview"><img></dialog>，现代浏览器原生支持，无需 polyfill - JS 中用
dialog.showModal()触发，关闭时监听close事件而非click，避免误触背景关闭 - 大图加载慢？给
<img>加loading="lazy"，但预览图必须去掉，否则首次点击会白屏等待
