纯 css 实现不了真正的 masonry 瀑布流，chrome 116+ 支持 display: masonry 但 safari/firefox 不兼容；主流方案是 grid + js 动态计算 grid-row-end，需防抖处理 resize/img load 竞态，避免 fouc 和错位。
纯 CSS 实现不了真正的 Masonry 瀑布流——column-count 是“伪瀑布流”，grid-template-rows 无法自动跨行适配高度，浏览器原生 display: masonry 目前仅 Chrome 116+ 支持且不兼容 Safari/Firefox。真要落地，得明确用哪条技术路径。
用 column-count 做静态瀑布流，但得知道它怎么“错”
这是最轻量的方案，适合内容固定、不需交互排序的场景（比如活动页快照、后台预览页）。
-
break-inside: avoid必须加在子项上，否则图片或卡片可能被截断在两列之间 - 列数由
column-count固定，响应式只能靠媒体查询切换，不能随容器宽度自动增减列 - 元素严格按 HTML 顺序从上到下、从左到右“流水线”填入，不会把短项插进前面的空隙——所以视觉上常出现某列明显矮一截
- 图片加载慢时，列高会重排导致抖动；必须配合
img { height: auto; width: 100%; }+ 容器aspect-ratio或伪元素占位
用 display: grid + JS 计算 grid-row-end，平衡兼容性与控制力
这是目前最主流的折中方案：CSS 负责结构，JS 负责动态跨行，不依赖第三方库，兼容到 IE11（需 polyfill grid）。
- 先设
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))控制列数自适应 - 设
grid-auto-rows: 1px（不是 10px），避免小数值累积误差；再用 JS 读取每个 item 的offsetHeight，除以 1 得跨行数，写入style.gridRowEnd = `span ${Math.ceil(height)}` - 窗口 resize 或图片加载完成时，必须重新计算并重置所有
grid-row-end，否则错位 - 别用
grid-auto-flow: dense想“自动填空”——它只对已知尺寸生效，动态高度下反而制造空白
用 Masonry 库或 display: masonry，只在新项目里考虑
Chrome 116+ 原生支持 display: masonry，但 Safari 和 Firefox 仍无计划支持；Masonry.js 等库本质还是 JS 计算，只是封装了逻辑。
- 启用原生
display: masonry只需一行：.container { display: masonry; masonry-axis: vertical; }，但必须搭配column-count或grid-template-columns定义列数 - Masonry.js 默认不处理图片懒加载，需监听
load事件后调用layout()，否则高度为 0 的占位导致错位 - 所有基于 JS 的方案，首次渲染都面临 FOUC（Flash of Unstyled Content）：默认堆成一列，JS 执行完才重排——加
visibility: hidden到容器，JS 布局完成后才visibility: visible
真正麻烦的不是怎么写代码，而是图片加载时机和容器尺寸变化的竞态条件——resize、scroll、img load 三个事件谁先谁后，决定了布局是否错乱。没做防抖和队列化处理的 JS 计算，上线后大概率在弱网或低端机上崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
