纯 css 瀑布流最稳妥方案是 grid-auto-flow: row + auto-fill 网格布局，兼容现代浏览器；column-count 仅作老 safari 或 ie fallback，需加 break-inside: avoid 和 aspect-ratio 防闪跳；响应式应分设 class 避免布局机制冲突。
纯 CSS 就能搞定瀑布流商品展示，但直接套 column-count 或 display: grid 很容易翻车——不是 Safari 错行，就是图片加载后闪跳，或者列数莫名其妙少一列。
用 grid-auto-flow: row 实现稳定“视觉瀑布”
这是目前最稳妥的纯 CSS 方案，不追求每列底部严格对齐，但渲染稳定、兼容性好（Chrome/Firefox/Safari 16.5+ 都 OK）。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 列宽自适应，最小 280px，超出则自动新增列 - 必须配
grid-auto-flow: row，靠内容自然堆叠形成瀑布感；grid-auto-flow: column在 Safari 上会错位，别碰 -
gap: 16px控制间距，别在.item上设margin，否则 Grid 会把它算进列宽，导致实际列数变少 - 子项不用设高度，但建议给图片容器加
aspect-ratio: 4/3或用伪元素占位，防止加载前高度塌陷
用 column-count 做兼容 fallback（尤其要支持 iOS 16.4 及更早）
当必须覆盖老 Safari 或需要 IE10+ 支持时才启用，但它天生有闪跳风险，必须干预。
-
column-count: 3+column-gap: 16px是基础，但仅此不够 - 每个
.item必须加break-inside: avoid，否则卡片可能被从中间劈开 - 图片必须包裹在固定宽高比容器里，例如：
div.item img { width: 100%; height: auto; }+ 外层div设aspect-ratio: 4/3，否则图没加载完时列高为 0，内容提前掉进下一列 - 列间距只能用
column-gap，不能用gap；也无法让某一项强制起新列（Grid 可用grid-column: 1 / -1，这里不行）
响应式切换时最易踩的坑：CSS 层叠和 height 计算冲突
同一组件在 md 屏用 Grid，在 sm 屏切回 column-count，样式一叠加就出问题。
- 别用同一 class 同时写两套布局逻辑，比如
.waterfall { display: grid; }和@media (max-width: 768px) { .waterfall { column-count: 2; } }—— Grid 的grid-auto-rows和 column 的高度计算机制互斥，可能导致高度塌陷或列数异常 - 推荐用不同 class 区分，例如
.waterfall-grid和.waterfall-column，再用媒体查询控制显隐 - 如果用了 JS 初始化（比如
masonry-layout），务必在断点切换后调用layout()，否则旧计算结果残留
真正难的不是写出来，而是让所有图片加载完成后再触发 layout，且 resize 时不卡顿——这一步纯 CSS 搞不定，得靠 JS 精细控制，但前提是 CSS 层已稳住基本结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
