CSS Grid 是目前最可靠方案，通过 display: grid + grid-template-columns + grid-auto-flow: dense 配合 grid-auto-rows 基准值实现视觉交错、语义有序的瀑布流；column-count 因 DOM 顺序与视觉顺序错位，损害可访问性与 SEO，不推荐。
用 CSS Grid 实现真正可控的瀑布流布局
纯 CSS 实现“视觉上交错、语义上有序”的瀑布流，grid 是目前最可靠的选择。Flexbox 无法自然处理列高不等时的错位填充，而 column-count 虽然能分栏，但元素顺序是按文本流垂直切割的，会导致 DOM 顺序和视觉顺序严重错位（比如第 1 个 item 跑到第三列底部），破坏可访问性和 SEO。
推荐方案：display: grid + grid-template-columns + grid-auto-flow: dense 配合明确的 grid-row 控制（或依赖自动行定位）：
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 10px; /* 触发自动行生成，值本身不重要 */
grid-auto-flow: dense;
}
<p>.masonry-item {
break-inside: avoid; /<em> 防止跨列断行（仅对多段落内容有效） </em>/
}注意：grid-auto-rows 设为一个固定小值（如 10px），是为了让 Grid 容器知道“每行高度基准”，从而让不同高度的 item 自动撑开对应行数。它不是 item 的最小高度。
JavaScript 补位法（Masonry.js）适用哪些场景
当需要严格按 DOM 顺序填入、且列高差异极大（比如混排图文卡片与长文卡片）、同时要求首屏渲染即精确错位时，CSS Grid 的自动行为可能不够稳定（尤其在动态加载或 resize 后）。这时应引入轻量 JS 库，如 masonry-layout 或 vanilla-masonry。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须给容器设置
position: relative，否则绝对定位子项会脱离上下文 - 每个
.masonry-item必须有明确高度（不能依赖height: auto且内部内容未加载完） - 动态添加 item 后，必须显式调用
layout()，例如：masonryInstance.layout() - 避免在
scroll事件中高频触发 layout —— 用throttle或IntersectionObserver替代
响应式断点下 column-count 的陷阱
很多人尝试用 column-count + break-inside: avoid 做响应式瀑布流，但它在实际项目中极易出问题：
- DOM 顺序 = 列内自上而下 + 列间从左到右，但视觉上用户看到的是“先填满第一列，再填第二列”，导致第 4 个 item 出现在第二列顶部，而非第一列底部之后 —— 违反直觉
-
break-inside: avoid在 Safari 中对 flex/grid 子项无效，只对块级流内元素起作用 - 无法控制某 item 强制出现在特定列，缺乏布局主动权
- 打印样式或屏幕阅读器仍按 DOM 顺序线性读取，但视觉已错乱，可访问性风险高
除非是纯静态、无交互、无 SEO 要求的后台看板类页面，否则不建议用 column-count 方案。
图片加载导致的重排错位怎么防
瀑布流最常破相的时刻：图片异步加载完成，高度突变，后续 item 全部下移，出现大片空白或重叠。这不是布局问题，而是资源加载时机问题。
解决方式要组合使用：
- 为所有
<img>设置明确的width和aspect-ratio（如aspect-ratio: 4/3），让浏览器预留正确占位空间 - 用
loading="lazy"配合decoding="async"减少主线程阻塞 - 监听
img.onload后手动触发一次layout()（JS 方案）或grid-template-rows重设（CSS 方案需配合 ResizeObserver） - 服务端返回图片宽高字段，在 HTML 中直接写成
style="--img-w: 800; --img-h: 600;"，CSS 里用padding-bottom: calc(var(--img-h) / var(--img-w) * 100%)做骨架占位
没预留宽高比的图片，就是瀑布流布局里最不讲武德的变量。别指望 layout 算法替你猜。
