用 + css grid 管理图片更稳定，因 grid 可控列数、间隙均匀、支持错误降级；flex-wrap 为一维布局，易致留白不均、高度错乱、重排异常，且 gap 兼容性差。

直接用 <figure></figure> + CSS Grid 管理图片资源，比堆 <div> + <code>float 或 flex-wrap 更稳——尤其当图片尺寸不一、需批量操作或要支持错误降级时。

为什么不用 flex-wrap 做图片网格

常见现象：最后一行只有 1–2 张图，左右留白不均；图片高度差异大时，整行被拉高，间隙错乱；动态插入新图后布局重排异常。

• flex-wrap: wrap 是一维布局，只按行“挤”，无法约束列宽和对齐逻辑
• 每张图若没设固定宽高比，flex 会按内容撑开，导致网格“塌陷”或断层
• 加 margin 模拟间隙会破坏 flex 项的计算，gap 在旧版 Safari 和 IE 中不生效

用 grid-template-columns: repeat(auto-fit, minmax()) 控制列数

这是响应式图片网格的核心写法，不是炫技，是解决“列数随容器变”这个实际问题的最小可行方案。

• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 表示：每列至少 250px，能塞下就自动新增一列，填满整行
• 必须配 gap: 12px（不是 margin），否则浏览器无法保证间隙均匀且不干扰网格轨道
• 若图片原始宽高比差异大，加 aspect-ratio: 4/3 或用包裹 <div> + <code>overflow: hidden 截图，避免拉伸变形

  给每张图加标题和操作按钮但不破坏网格流

  很多人把 <figcaption></figcaption> 和 <img> 并列写在 <figure></figure> 里，结果发现每组占满一行——因为 <figcaption></figcaption> 默认是块级元素，强制换行。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 正确做法：用 <figure class="gallery-item"></figure> 包裹 <img> 和 <figcaption></figcaption>，再设 .gallery-item { display: inline-block; width: 100%; vertical-align: top; }
  • 操作按钮（如删除、下载）用绝对定位：position: absolute; top: 8px; right: 8px;，父级 <figure></figure> 需加 position: relative;
  • 避免用 display: contents（虽语义干净），Safari 15.6 之前不支持，容易导致按钮错位

  图片加载失败时如何快速定位并降级

  开发阶段路径写错很常见，仅靠 alt 文字看不出是路径错还是图真丢了。得靠 JS 监控+控制台辅助。

  • 单图监听：<img src="xxx.jpg" onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;">
  • 批量处理：document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { /* 降级逻辑 */ }))
  • 开发时快速排查：在控制台运行 Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有加载失败的 <img>
  • 路径统一用相对路径，从 HTML 文件所在目录算起；避免混用 ./images/ 和 images/，否则入口页位置一变就全挂

  真正卡住人的不是语法，而是图片尺寸不一致时的网格坍塌、路径错误时的静默失败、以及按钮定位在不同浏览器中的偏移——这些细节不提前压住，后期调试成本远高于初期结构设计。