使用方法
- 在「照片数量」填 6（已预填），范围 2 到 12。
- 在「版式」里选 网格、横向条 或 竖向条。
- 点「生成版式」，或直接在该数量输入框里按 Enter 键。
- 结果区上方是按数量与版式排好的彩色预览，下方是可直接复制的 CSS Grid 代码。
- 点「复制 CSS」把代码拿走，粘进你自己的项目即可，再替换成真实图片。
这个PhotoCollage生成能解决什么
一是排版前先定构图。很多人开始做拼图时，先纠结照片怎么摆，结果反复返工。本工具把「几张照片、走哪种版式、分成几行几列」先算清楚，给出可复制的栅格代码，你照着填图片就行，省掉试错时间。
二是避免引入图片处理依赖。真正把多张图合成一张，需要上传到服务器或调用图像库，既慢又有隐私顾虑。PhotoCollage生成只负责版面，用纯色块占位，全程在浏览器本地跑，不碰你的任何照片。
三是统一栅格、保证对齐。手写 CSS Grid 容易在列数、间距上出错，尤其照片数量变化时。本工具按数量自动推导行列，输出的列数、间距、单元格样式都成套，复制即用，不会出现参差不齐。
四是适配不同展示场景。网格适合九宫格式的方图墙；横向条把每张照片排成一条，适合做信息流长图；竖向条把照片并排成列，适合做对比或时间轴。三种版式覆盖大多数社交平台的拼图需求。
五是给设计师和开发者当脚手架。拿到这份 CSS，再换成真实图片地址、加上圆角和阴影，就是成品拼图。它把「布局」这一步从繁琐的样式调试里抽出来，变成一次生成。
六是方便团队协作与沟通。把生成的版式和预览截图发给同事或客户，对方一眼就能看懂最终构图，省去口头描述「上面三张、下面三张」带来的歧义。色块本身已经表达了每张照片的位置与占比，讨论起来比文字高效得多。
七是帮新手跨过 Grid 的门槛。不少刚学前端的人卡在 grid-template-columns 的写法上，本工具把列数直接算好并给出成套代码，你可以照着读、照着改，顺便理解 fr 单位和 repeat 函数的含义，比单纯看文档更直观。
原理和变量
三种版式的排布规则都来自同一个 CSS Grid 思路，区别只在列数怎么定：
| 变量 | 含义 | 取值 |
|---|---|---|
| 照片数 | 参与拼图的照片张数 | 2 到 12 的整数 |
| 版式 | 栅格的排布方式 | 网格 / 横向条 / 竖向条 |
| 间距 | 单元格之间的空白 | 固定 8 像素 |
| 网格列数 | 网格版式下的列数 | 取照片数的平方根向上取整 |
网格：列数 = ceil(√照片数)，行数 = ceil(照片数 ÷ 列数)，每个单元格占 1×1。横向条：单列、每张照片一行，行高固定。竖向条：列数 = 照片数，每张照片占一列。所有颜色都按序号用 HSL 循环生成，因此同一组参数每次得到完全相同的预览，方便复现和沟通。
还有两点实现细节值得说明。一是单元格用 aspect-ratio 固定比例，所以不论外层容器多宽，每张照片的占位都保持方形；换成真实图片后用 object-fit: cover 裁切填充，避免被拉长变形。二是栅格本身自适应，列宽用 1fr 表示均分剩余空间，容器变窄列就同步变窄，因此无需再写媒体查询就能在手机上正常排布，这也是 CSS Grid 比老式浮动布局省心的地方。
完整示例
以默认参数 照片数 6、版式 网格 为例：列数 = ceil(√6) = 3，行数 = ceil(6 ÷ 3) = 2，于是得到 3 列 2 行的栅格，共 6 个单元格。对应的 CSS 核心为：
display: grid;声明容器为栅格。grid-template-columns: repeat(3, 1fr);表示三列等宽。gap: 8px;单元格之间留 8 像素间距。- 每个单元格是一个
div，可再设aspect-ratio、border-radius等样式。
换成横向条时，列数变成 1，六张照片自上而下排成六行；换成竖向条时，列数变成 6，六张照片从左到右排成一排。版式切换后，代码里的 grid-template-columns 会随之变化，其余结构不变。
三种版式对照表
同一组 6 张照片，在三种版式下行列与适用场景的差别如下：
| 版式 | 列数 | 行数 | 适合场景 |
|---|---|---|---|
| 网格 | 3 | 2 | 方图墙、九宫格、社交动态 |
| 横向条 | 1 | 6 | 信息流长图、自上而下阅读 |
| 竖向条 | 6 | 1 | 横向对比、时间轴并排 |
结果边界与错误提示
- 照片数范围 2-12：输入框带了
min和max，填 1 或 13 会明确报错，不会生成无意义布局。 - 必须是正整数：填了小数或非数字，会提示只填 2 到 12 之间的整数。
- 留空会提示：数量框为空时，点生成会提醒先填照片数量，并给出 6 的示例。
- 版式只能三选一：下拉框限定在网格、横向条、竖向条之内，不会收到未知值。
- 只排版面不合成图：结果里的色块是占位示意，不是真实照片，需自行替换为图片地址。
- 列数向上取整：当照片数不是完全平方数时，最后一行可能不满，这是栅格的正常表现。
- 间距固定 8 像素：本工具不开放间距微调，若需其他间距请在复制后自行改 CSS。
- 全程本地：所有版面都在浏览器算，不联网、不上传，刷新回到默认 6 / 网格。
- 预览色块非真实比例：色块只为示意位置与数量，真实照片的比例由你后续设置的 aspect-ratio 决定，本页不强制锁定某一长宽比。
- 复制的是骨架不是成品：导出的 CSS 只含布局结构，圆角、阴影、悬停动画等美化需要你自行补充，工具不替你做样式装饰。
常见问题
这个工具会替我把照片拼成一张图吗？
不会。PhotoCollage生成的只是布局方案与 CSS 代码，用纯色块表示每张照片的位置和占比。真正的图片合成需要在你自己的项目里把色块换成图片，本页不做任何图像处理，也不会上传你的文件。这样做的好处是零隐私风险，也避免大图上传拖慢速度，你随时可以拿代码去任何环境落地。
为什么最多只能 12 张？
12 张是移动端拼图最常见的上限，再多单元格会过小、栅格也难看。超过 12 张建议分成多组拼图，或改用横向条做长图。若你有特殊需要，复制代码后自行增减单元格即可。这个上限也顺带控制了生成代码的体量，保证复制粘贴时不会一次塞进过长的内容。
网格的列数怎么定的？
列数 = 照片数开平方后向上取整，这样最接近正方形排布，视觉最稳。例如 6 张取 3 列、10 张取 4 列、12 张取 4 列。行数再按列数补足，最后一行可能不满。
复制出来的代码能直接用吗？
能直接作为栅格骨架使用。你只需把每个占位 div 换成 img 或带背景图的容器，并按喜好加圆角、阴影。间距、列数都已经算好，无需再调。若你想让某张照片跨两列或跨两行，再单独给它加 grid-column: span 2 之类的小调整即可，基础结构已经帮你搭好。
颜色是怎么来的，能不能统一？
颜色按单元格序号用 HSL 循环生成，保证同一组参数每次预览完全一致，方便你截图沟通。若想统一色调，复制后在 CSS 里把背景色改成固定值即可。
横向条和竖向条有什么实际区别？
横向条是单列、照片自上而下排，适合手机上竖向滑动阅读的长图；竖向条是单行、照片并排，适合做左右对比或时间轴。两者都只是改了 grid-template-columns 的列数。
生成的版式在手机上会乱吗？
不会。CSS Grid 的 1fr 单位会随容器宽度自动伸缩，容器变窄列就变窄，始终等宽对齐。你把它放进响应式容器里就能在手机上正常显示。若外层限宽较窄，列数不变但每列更窄，照片只是整体缩小而不会错位，这正是栅格布局相对绝对定位最大的优势。
我的照片会泄露吗？
不会。本页不读取、不上传任何图片，连输入框都没有文件选择。所有计算只用你填的数字和版式，刷新后回到默认参数。