CSS Grid 不支持原生 Masonry 布局，仅 Chrome 116+ 有限支持 grid-template-rows: masonry；纯 CSS 可用 column-count 模拟，但图片尺寸差异大会出错；JS 方案（如 Masonry 库）是唯一稳定方案；所谓“Grid 类拼图”实为固定行高+object-fit 裁切，非真正自适应。
拼图布局不是 Grid 的原生能力
CSS Grid 本身不支持 Masonry（拼图）布局，grid-template-rows 无法让子项按高度自动“掉落”到下一个可用轨道。浏览器至今没实现 grid-auto-flow: masonry 的完整支持（仅 Chrome 116+ 有限支持且需 display: grid; grid-template-rows: masonry;，但 Safari / Firefox 完全不认）。强行用 Grid 模拟拼图，结果往往是列高不齐、间隙错乱或 JS 补救——这不是“构建”，是绕路。
真正可行的拼图画廊只有两个路径
选哪条取决于你是否能接受 JS 或是否必须纯 CSS：
- 纯 CSS 方案：用
column-count+break-inside: avoid模拟竖向分栏，适合文字为主、图片高度差异不大的场景；但图片若宽高比悬殊，会出现跨列断裂或空白撕裂 - JS 方案：用
Masonry库（如 vanilla Masonry 或 CSS Grid + JS 动态计算位置），或现代方案CSS container queries配合 JS 触发重排；这是目前唯一能稳定处理任意尺寸图片的方案
别信“Grid + grid-auto-flow: dense”能搞定拼图——它只重排顺序，不改变轨道高度，子项仍被钉死在行高里，视觉上毫无 Masonry 效果。
如果坚持用 Grid 做“类拼图”网格，必须放弃高度自适应
所谓“类拼图”，其实是固定行高 + object-fit: cover 裁切，让所有卡片视觉上对齐：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-rows: repeat(4, 200px)—— 显式定义行高，避免隐式行塌陷 -
img必须设width: 100%; height: 100%; object-fit: cover;，否则原始尺寸会撑破格子 - 加
overflow: hidden到卡片容器，防止裁切失效时溢出 - 小屏下改用单列
grid-template-columns: 1fr，否则多列+固定行高会导致严重留白
这种布局本质仍是规则网格，只是靠裁剪掩盖了高度差异——它不解决拼图问题，只降低视觉违和感。
移动端拼图画廊最容易翻车的三处
哪怕用了 Masonry 库，以下问题仍高频出现：
- 图片加载完成前高度为 0，JS 计算位置出错 → 必须监听
img.onload或用loading="lazy"配合IntersectionObserver延迟初始化 - iOS Safari 对
position: absolute子项的 transform 性能差，滚动卡顿 → 改用will-change: transform或降级为 column 布局 - 父容器宽度未继承（比如被
max-width: 1200px截断），导致 Masonry 宽度误判 → 检查所有祖先元素是否设置了width、padding或overflow: hidden
拼图布局的复杂性不在代码行数，而在它把 DOM 尺寸、加载时序、渲染管线全串在一起——漏掉任一环，画廊就卡在半空。
