花生公众号排版器多图网格排版技巧：连续图片秒变朋友圈式2-3列布局

花生公众号排版器（huasheng_editor）的多图网格排版功能，可以把文章中连续插入的多张图片，自动排成类似朋友圈的 2-3 列网格布局。你不需要写任何 HTML 或 CSS，只要把图片连续写在一起，右侧预览即刻呈现整齐的多图网格；点击「复制到公众号」后，网格还会自动转换成公众号编辑器完全兼容的 Table 布局，粘贴过去格式不乱。

朋友圈式多图布局：一张表看懂自动规则

花生公众号排版器会检测正文中连续的 2 张及以上图片，按数量自动套用对应网格规则：

单张图片不受影响，仍按单图样式居中显示，最大高度 400px；进入网格后的图片最大高度为 360px，保持宽高比不变形，并自带圆角，观感接近朋友圈相册。

这套规则的实现在 app.js 的网格样式分支中：2 张与 4 张走1fr 1fr两列网格，3 张与 5 张以上走repeat(3, 1fr)三列网格，间距统一为 8px。

快速上手：三步做出朋友圈式多图排版

第一步：连续粘贴图片

在左侧编辑区，用以下任一方式插入图片，关键是多张图片之间不要留空行：

• 截图后直接Ctrl+V/Cmd+V粘贴（支持来自截图工具、浏览器、文件管理器）
• 把图片文件直接拖进编辑器
• 手动输入 Markdown 图片语法

图片会被自动压缩（最大 1920px、质量 85%，平均压缩 50%-80%）并存入浏览器本地 IndexedDB，编辑器里只显示一个img://img-xxx短链接，编辑过程不卡顿、刷新不丢失。

第二步：让图片"连续"排列

判定图片是否"连续"的逻辑在 app.js 的分组算法里，简单说就是：

• 同一个段落里的多张图片 → 必定成组
• 相邻段落（中间没有空行）的图片 → 视为连续
• 中间隔了空行或其他内容→ 打断分组，各自单独处理

所以想排 3 列，就把 3 张图紧挨着写：

图一 图二 图三

想让后面的图另起一组（比如 3+2 的布局），在两组图片之间空一行即可。

第三步：选择样式并复制到公众号

在顶部样式区选一个排版主题（内置默认、技术、纽约时报、金融时报等 13 种风格，配置见 styles.js），点击「复制到公众号」，直接粘贴进公众号图文编辑器即可。

为什么复制到公众号后网格不会乱？

很多人担心：网页里漂亮的 CSS Grid 布局，粘进公众号后台会被剥掉样式变回一列。花生公众号排版器专门解决了这个问题：

1. 预览阶段使用 CSS Grid 渲染，现代美观；
2. 复制瞬间，convertGridToTable() 方法自动把网格转换成table布局，每个单元格内再用table-cell实现图片垂直居中，并加上灰色底衬、圆角和 4px 内边距；
3. 所有样式全部内联（inline style），并带!important强制优先级，确保公众号编辑器不丢弃格式。

对应源码位置：网格创建 groupConsecutiveImages()、Grid 转 Table convertGridToTable()、复制主流程 copyToClipboard()。

多图排版实用技巧清单 📸

• 拍立得/图集感：3 张连续图片最适合"封面+两张细节"的叙事结构，正好排成一行三列
• 对比展示：2 张图（改造前/改造后、方案 A/B）用两列并排，读者一眼看完
• 多图攻略：5 张以上自动 3 列网格，适合教程步骤图、穿搭图集、旅游相册
• 混排不慌：单图和网格可以交替出现，单图居中占满一行，网格紧凑成组，节奏感很好
• 动图注意：GIF 在网格中同样生效，但复制到公众号时可通过页面右上角的「含 GIF」开关决定是否保留动图，关闭时会替换为黄色提示条，方便你在公众号里重新上传
• 超大图片：单张上传上限 10MB，超出会提示错误，建议先裁剪再粘贴

常见问题 FAQ

问：图片之间加了说明文字还会成网格吗？不会。文字、空行都会打断"连续"判定，网格只针对相邻成组的图片，文字段落会被安全地保留在两组图片之间。

问：换浏览器或换电脑后图片还在吗？图片存储在浏览器本地的 IndexedDB 中（约可容纳 100-500 张压缩图），换环境前建议先点「复制到公众号」把内容带出去，或导出 Markdown 备份。

问：这套布局依赖什么技术？Vue 3 + Markdown-it 解析，Canvas API 压缩，IndexedDB 持久化，纯 CSS 渲染，无需构建工具，打开网页即用。项目结构说明见 README.md，更新历史见 CHANGELOG.md。

相关模块速查

• 网格分组与列数逻辑：app.js
• Grid 转 Table 兼容处理：app.js
• 图片粘贴、压缩与存储：app.js
• 13 种样式主题配置：styles.js
• 使用指南：README.md