纯 column-count 无法无缝拼接，因其按文本流切分内容、不感知子项真实高度，图片异步加载导致高度从0撑开引发重排闪跳；grid-auto-flow: dense 配合固定行高和 aspect-ratio 是当前最稳的 CSS 方案。
为什么纯 column-count 无法做到无缝拼接
因为 column-count 把内容当文本流切分，不感知子项真实高度。图片异步加载时，初始高度为 0，后续撑开会导致整列重排，视觉上就是“闪跳+留白”，根本谈不上无缝。即使加了 break-inside: avoid，也只防劈开，不防错位。
grid-auto-flow: dense 配合固定行高是当前最稳的 CSS 无缝方案
它靠 Grid 自动填空，只要所有子项高度可预估（比如后端返回宽高比、或统一设 aspect-ratio），就能避免塌陷和错位。
- 必须设
grid-auto-rows（哪怕只是1px），否则 Grid 不生成足够行轨道，dense失效 - 子项不能设
margin，用gap控制间距；否则 margin 会参与网格尺寸计算，导致列数意外减少 - 给图片容器加
aspect-ratio（如aspect-ratio: 4/3）或内联width/height，防止加载前高度为 0 - 避免在 grid 容器上设
overflow: hidden，否则跨多行的 item 可能被截断
动态图片场景下，JS 补位才是真无缝的关键
纯 CSS 拿不到加载完成后的实际尺寸，所以首屏渲染后图片撑开仍会引发错位。这时候必须等图加载完再重排。
- 用
imagesLoaded插件监听所有img加载完成，再触发masonryInstance.layout() - 初始化前确保每个
.masonry-item有明确高度——哪怕只是占位值，否则getBoundingClientRect()返回0 - 动态插入新项时，调用
layout.appended(newItems)，别用reloadItems()，后者会全量重排，卡顿明显 - 不要在
scroll里直接调layout()，用IntersectionObserver或节流函数控制触发频率
Safari 和旧版 Chrome 的兼容 fallback 必须手动写
原生 grid-template-rows: masonry 只在 Chrome/Edge 116+ 支持，Safari 全系不认。指望自动降级？不存在的。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (grid-template-rows: masonry)包住 Masonry Grid 写法，里面再嵌一层@supports not (grid-template-rows: masonry)写 column-count fallback - column-count fallback 里必须配
aspect-ratio或伪元素 padding-bottom 技巧，否则 iOS Safari 下闪跳更严重 - 别信“加个 polyfill 就能跑”，目前没有可靠 polyfill 能模拟 masonry 行为
