纯 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），就能避免塌陷和错位。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 必须设 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 行为

真正无缝拼接不是布局方式选对就完事，而是从 HTML 结构、图片加载时机、CSS 层叠顺序到 JS 触发时机，每一步都得卡准。最容易被忽略的是：图片没设宽高或 aspect-ratio 时，Grid 和 Masonry 都会拿到 0 值——这时候你调 layout，等于在排一堆看不见的盒子。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！