真正优雅的相册网格方案是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，配合gap、aspect-ratio和srcset实现响应式、无抖动、高性能展示。
用 CSS Grid 实现“自动适配列数”的相册网格
直接写 grid-template-columns: repeat(3, 1fr) 是最常见错误——它强制三列，小屏下图片被压扁或溢出。真正优雅的方案是让浏览器自己决定列数：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。
这个表达式的意思是：每列最小 280px，最大均分剩余空间；空间不够时自动减少列数，而不是缩放图片。搭配 gap: 12px 控制间距，比手动写 margin 更可靠，不会干扰轨道计算。
图片本身只需：width: 100% + height: auto，别加 flex 或 float ——Grid 容器里这些属性无效还可能触发怪异行为。
- 如果某张图特别高（比如竖构图），加
align-self: start防止被下方图片拉高整行 - 所有图片必须设
max-width: 100%，否则原始尺寸大的图会撑破列宽 - 避免在
img上写死height，否则破坏响应式比例
图片尺寸差异大时，怎么防止布局抖动？
加载前图片没尺寸，浏览器无法预留空间，导致内容跳动（layout shift）——这是影响 CLS 的关键点。解决方案不是靠 JS 算高度，而是用原生 CSS 属性 aspect-ratio。
立即学习“前端免费学习笔记（深入）”；
给每个 img 或其父容器（如 .photo-item）加上 aspect-ratio: 4/3（按你相册主流比例调整），浏览器就能提前分配占位空间。即使图片加载失败，也不会塌陷或错位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不支持
aspect-ratio的老浏览器（IE、旧版 Safari）可降级为 padding-top 百分比 hack，但 2026 年绝大多数用户已无需考虑 - 别用
object-fit: cover替代aspect-ratio，它只控制裁剪方式，不解决占位问题 - 如果相册图比例差异极大（如横图+竖图+方图混排），建议统一用
aspect-ratio: 1/1+object-fit: cover强制等比裁剪，视觉更整齐
Canvas 拼接只在需要导出单图时才用
想把多张图合成一张 PNG 用于下载、分享或生成海报？这时才轮到 canvas 和 drawImage。仅用于页面展示，纯属杀鸡用牛刀。
关键限制很硬：所有图片必须先加载完成，用 Promise.all 包裹 img.onload；跨域图必须设 img.crossOrigin = 'anonymous'；画布尺寸得手动算：canvas.width = 所有 img.naturalWidth 之和 + 间隙，不能靠 CSS 缩放画布，否则导出模糊。
-
img.width/img.height是渲染尺寸，拼接必须用img.naturalWidth/img.naturalHeight - 横向拼接时，第二张图的
dx= 第一张图的naturalWidth+ 间隙，不能凭感觉写死像素值 - 如果只是想“看起来像拼图”，用 Grid +
grid-template-areas定义不规则区域更轻量，也支持响应式重排
srcset 不是可选项，是必须项
只写 <img src="photo.jpg"> 是裸奔。现代相册必须用 srcset + sizes 让浏览器选最合适的图源。
例如：<img src="photo-small.jpg" srcset="photo-small.jpg 480w, photo-medium.jpg 768w, photo-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">。这样手机只下小图，桌面下大图，节省带宽又提升清晰度。
- 漏掉
sizes，浏览器默认按 100vw 选图，可能在中屏设备上错载大图 - 不要用 JS 动态切换
src，绕过浏览器内置的资源选择机制，反而更慢 - 开发阶段快速验证：在 Chrome DevTools 的 Network 面板勾选 “Disable cache”，刷新看实际加载的是哪张图
真正难的不是写对 Grid 或 Canvas，而是判断“这张图到底要不要拼接”——展示用 Grid，导出用 Canvas，加载优化靠 srcset，三者边界清晰了，就不太会踩坑。
