最简不规则拼图布局用CSS Columns实现：column-count + break-inside: avoid，需为图片容器设break-inside: avoid、显式column-gap，移动端用媒体查询回退单列；Grid方案则依赖grid-auto-flow: dense配合aspect-ratio、object-fit和HTML原生宽高防变形跳动。
用 CSS Columns 实现最简拼图布局
原生支持、零 JS、代码最少的不规则拼图方案就是 column-count + break-inside: avoid。它不是“真 Grid”，但视觉上就是瀑布流拼图，适合相册、博客图集等对排序逻辑无强要求的场景。
常见错误现象：图片被截断、列间高度差极大、小屏下只剩一列还留大片空白。
- 必须给每张图的直接容器（如
<figure>）加break-inside: avoid，否则长图会被硬切到两列 -
column-gap要显式设置，别指望 margin 模拟——列内元素不参与 gap 计算 - 移动端单列时，
@media (max-width: 640px) { .masonry-grid { column-count: 1; } }比 JS 重排更稳 - Safari 旧版对
column-fill: balance支持差，别依赖它均分高度；实际渲染以内容自然流为准
用 CSS Grid + dense 实现可控拼图
当需要跨行/跨列、固定首图位置、或混排不同尺寸卡片时，grid-auto-flow: dense 是关键。它允许 Grid 把小项目“塞进”前面留下的空隙，形成真正错落的拼图效果。
容易踩的坑：dense 模式会打乱 DOM 顺序渲染，语义化和可访问性风险高；且不解决图片本身比例失真问题。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: grid和grid-auto-flow: dense，仅靠auto-fit不生效 - 每个图项需显式声明高度（如
min-height: 200px），否则 dense 无法判断“哪里有空” - 想让某张图占两行？加
grid-row: span 2；占两列？加grid-column: span 2 - IE 不支持
dense，降级方案只能回退到单列或 Columns
图片不变形的三层强制控制
拼图布局最容易被忽略的不是“怎么排”，而是“图怎么不拉伸”。Grid 只管格子，不管图在格子里怎么缩放。漏一层，就变形、溢出、或留白。
- 给每张图的**直接父容器**（比如
<figure>）设aspect-ratio: 4/3或1/1，不能直接写在<img>上 -
<img>必须写width: 100%; height: 100%; object-fit: cover;——只写width: 100%会导致高度塌陷 - HTML 的
<img>标签里必须带width和height属性（非 CSS），否则加载时布局跳动（CLS） - 混合 1:1 和 16:9 图片时，统一用
aspect-ratio容器 +object-fit: cover，比 JS 计算高度更可靠
auto-fill 比 auto-fit 更适配拼图场景
拼图要的是列宽稳定、间隙一致，不是“把整行撑满”。auto-fill 按 minmax() 最小值预占列位，哪怕最后一行只有一张图，宽度也和其他列一致；auto-fit 则会把这张图强行拉宽填满，人脸横向拉伸就是典型表现。
调试时看到列数没变但图片突然变胖，大概率是误用了 auto-fit 却期待 auto-fill 行为。
- 写法是
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))——最小值建议比目标图宽小 10–20px，为gap留余量 - iPhone SE 实际可用宽度约 340px，若设
minmax(300px, 1fr)，减去左右边距和 gap 后根本塞不下两列 - 不要用
flex-wrap替代：动态加载或图片尺寸不一致时，flex 容易断行错位、最后一行留白
真正难的不是写出拼图，而是让每张图在任意设备、任意列数、任意加载时机下，都不拉伸、不跳动、不错位。这三件事：容器 aspect-ratio、图片 object-fit、HTML 原生 width/height，少一个都不可靠。
