瀑布流必须用扁平dom结构，.masonry下只能直系.item；若中间插入.wrapper层，则break-inside: avoid失效，导致图片被截断；正确写法为.masonry > .item严格直接子元素关系，且css选择器须精确匹配。
瀑布流必须用扁平 DOM 结构，.masonry 下只能直系 .item
如果中间插了 wrapper 层，比如 <div class="masonry"><div class="wrapper"><div class="item"></div></div></div>，那 break-inside: avoid 就会失效——浏览器根本不会把 .item 当作列内独立单元处理，图片大概率被截断在两列之间。
正确写法只有一层嵌套：.masonry > .item 必须是直接子元素。CSS 里也得严格匹配这个关系，不能写成 .masonry div（会命中内部所有 div），也不能靠类名模糊推导。
- 多个瀑布流区域共存时，建议加命名空间前缀，比如
.gallery-masonry和.feed-masonry，避免规则互相覆盖 - 用
display: grid方案时同样适用：父容器下每个.item必须是直接子节点，否则grid-auto-flow: dense可能漏填空隙
column-width 比 column-count 更适合响应式
硬写 column-count: 3 在小屏上会撑不满、大屏又太挤，而且要配一堆 @media 才能勉强适配。直接设 column-width: 280px，浏览器会自动算出该分几列：容器宽 ≥ 560px → 至少 2 列；≥ 840px → 至少 3 列。
注意：column-width 和 column-count 别同时设，后者会被忽略；容器宽度小于 column-width + column-gap 时，自动退化为单列，这是预期行为，不是 bug。
- Safari 需额外加
-webkit-column-break-inside: avoid，否则break-inside: avoid不生效 -
column-gap推荐用固定值（如1rem），避免窄屏下卡片被压扁
图片不能裸放，必须包裹在 position: relative 的容器里
单独把 <img> 塞进 .masonry 是高危操作。一是 break-inside 对替换元素支持不稳定；二是无法控制点击区域、悬停 badge 等交互逻辑。
务必用一层 <div class="item"> 包住 <code><img>，并给 .item 加 position: relative。这样 .price 或 .overlay 才能用 position: absolute 定位，且不影响列高计算。
- 现代浏览器可用
aspect-ratio: 4/3防塌陷；旧版需用padding-top: 75%+ 绝对定位模拟 - 禁用全局
img { height: auto }类样式，它会让父容器高度塌缩
CSS Grid 方案中 grid-auto-flow: dense 不可省略
用 display: grid 实现瀑布流时，漏掉 grid-auto-flow: dense 是最常见翻车点——某张图特别高，后面内容就卡在它下方留白，形成明显纵向断层。
核心组合是：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) + grid-auto-flow: dense。注意必须用 auto-fit（收缩未填充列），不是 auto-fill（保留空列占位）。
- Firefox 下
gap渲染可能错位，稳妥做法是改用gap: 1rem并配合.item:last-child { margin-bottom: 0 } - 真 Masonry（按列高最低处插入）仍需 JS，纯 CSS Grid 是“伪瀑布”，但视觉效果足够生产使用
