HTML瀑布流结构必须扁平，.masonry容器下每个.item必须是直接子元素；插入中间wrapper会导致break-inside失效、图片被截断；图片须包裹在.position-relative的.item内，不可裸放；column-width比column-count更响应式；Safari需额外加-webkit-column-break-inside: avoid。
HTML结构必须扁平，子元素直系挂载到容器上
瀑布流对DOM层级极其敏感。.masonry 容器下的每个卡片（.item）必须是它的**直接子元素**。如果中间插了一层 <div class="wrapper">，break-inside: avoid 就会失效，图片可能被截断在两列之间。
常见错误写法：<div class="masonry"><div class="wrapper"><div class="item">...</div></div></div> —— 这时 break-inside 得加在 .wrapper 上，否则白写。
正确结构示例：
<div class="masonry"> <div class="item"><img src="1.jpg"></div> <div class="item"><img src="2.jpg"></div> <div class="item"><img src="3.jpg"></div> </div>
容器和子项的class命名不重要，但选择器必须精确匹配
用 column-count 实现时，CSS 里写的 .masonry > * 是关键：它只作用于直接子节点。如果你用的是 .grid-item，那 CSS 就得对应写成 .grid > .grid-item，不能靠父类名模糊匹配。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 用
.masonry div会命中所有后代div，包括卡片内部的描述、按钮等，导致布局错乱 - 没加
>子选择器，结果 hover 效果或 margin 意外应用到嵌套元素上 - 多个瀑布流区域共存时，用相同 class 名但没加唯一前缀，CSS 规则互相覆盖
图片必须包裹在块级容器内，不能裸放 <img>
单独把 <img> 直接塞进 .masonry 是危险操作。原因有二：一是 break-inside 对替换元素（如 img）支持不稳定；二是无法控制图片外的交互区域（比如点击收藏、悬停显示价格 badge）。
务必用一层 <div class="item"> 包住 <img>，并给 .item 加 position: relative：
<div class="item"> <img src="a.jpg" alt=""> <span class="price">¥99</span> </div>
这样 .price 才能用 position: absolute 定位，且不会脱离文档流影响列高计算。
响应式列数别硬写死，用 column-width 更可靠
写 column-count: 3 看似简单，但一到小屏就撑不满、大屏又太挤。更稳妥的做法是设 column-width: 280px，让浏览器自动算该分几列。
注意点：
-
column-count和column-width别同时设，浏览器优先按column-width算 - 容器宽度小于
column-width + column-gap时，会退化为单列，这是预期行为 - 不要给容器设
height: 0或min-height: 0，否则列高塌陷，所有卡片堆在一起
break-inside 的兼容性极差——必须补一句 -webkit-column-break-inside: avoid，否则 iOS 上大概率出现图片被劈成两半的情况。 
