column-count实现瀑布流需扁平DOM结构，.item必须为.masonry直系子元素，因浏览器按顺序切片分栏且break-inside: avoid仅对直接子元素生效；裸img不支持break-inside，须用.position:relative的.item包裹；Firefox/Safari需额外兼容处理；高度差异大或需自动列数时应改用CSS Grid。
纯 CSS 实现瀑布流，column-count 是最快上手的方案，但它不是真瀑布流——它不按“最短列优先”排列，只按文档流顺序切片分栏。要避免图片被截断、错位或留白严重，结构和 CSS 必须严丝合缝。
为什么 column-count 的 DOM 结构必须扁平
浏览器对 column-count 的分栏逻辑非常机械：它把容器内所有**直接子元素**按顺序逐个塞进各列，不管高度。一旦中间插了 wrapper 层，break-inside: avoid 就失效，.item 可能被硬生生劈成两半，出现在不同列里。
- 错误写法：
<div class="masonry"><div class="wrapper"><div class="item"></div></div></div>—— 此时break-inside得加在.wrapper上，否则白写 - 正确写法：
<div class="masonry"><div class="item"></div><div class="item"></div></div>——.item必须是.masonry的直系子节点 - 选择器必须精确：
.masonry > *或.masonry > .item，不能写成.masonry div，否则会误命中内部描述、按钮等嵌套元素
break-inside: avoid 为什么对裸 <img> 失效
单独把 <img> 直接塞进 .masonry 容器，break-inside: avoid 在多数浏览器中不生效。原因有两个：一是 <img> 是替换元素，break-inside 对它的支持本就薄弱；二是没有外层块级容器，就没法加 position: relative 控制悬停 badge、价格标签等交互元素定位。
- 必须用一层
<div class="item">包住<img> - 给
.item加position: relative，这样.price才能用position: absolute定位且不影响列高计算 - 别依赖
width/heightHTML 属性控制比例，响应式下它们已不可靠
Firefox 和 Safari 下 column-count 的兼容补丁
column-count 在 Chrome/Edge 表现稳定，但在 Firefox 和 Safari 里容易出现图片错位、间隙错乱、甚至整列塌陷。关键问题出在渲染引擎对 break-inside 和图片异步加载的处理差异。
立即学习“前端免费学习笔记（深入）”；
- Safari 必须加
-webkit-column-break-inside: avoid，否则break-inside形同虚设 - Firefox 对图片未加载完成时的高度估算不准，建议统一给
.item设最小高度（如min-height: 200px）或用aspect-ratio预留空间 - 列间距别只靠
column-gap，额外加margin-bottom并用:last-child { margin-bottom: 0 }清除底部冗余间隙
什么时候该放弃 column-count，改用 CSS Grid
如果你需要列数随容器宽度自动变化、图片高度差异极大、或要求首次渲染不跳动，column-count 就撑不住了。这时候该切到 display: grid + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) + grid-auto-flow: dense。
-
auto-fit而非auto-fill：前者收缩空列，后者保留占位，响应式场景下必须选auto-fit - 漏掉
grid-auto-flow: dense会导致明显纵向断层，尤其当某张图特别高时 - 图片塌陷问题更严重：必须用
aspect-ratio或padding-top+position: absolute预留空间，不能等图片加载完再重排
真正难的不是写对那几行 CSS，而是图片加载时机和容器尺寸变化的协同——这些点一旦忽略，瀑布流就会在用户滚动时突然“抖一下”。
