HTML瀑布流结构必须扁平，.masonry容器下每个.item必须是直接子元素；插入中间wrapper会导致break-inside失效、图片被截断；图片须包裹在.position-relative的.item内，不可裸放；column-width比column-count更响应式；Safari需额外加-webkit-column-break-inside: avoid。
HTML结构必须扁平，子元素直系挂载到容器上
瀑布流对DOM层级极其敏感。
容器下的每个卡片（
）必须是它的**直接子元素**。如果中间插了一层
.masonry.item
，
break-inside: avoid
就会失效，图片可能被截断在两列之间。
常见错误写法：
...
—— 这时
break-inside
得加在
.wrapper
上，否则白写。
正确结构示例：
容器和子项的class命名不重要，但选择器必须精确匹配
用
column-count
实现时，CSS 里写的
.masonry > *
是关键：它只作用于直接子节点。如果你用的是
.grid-item
，那 CSS 就得对应写成
.grid > .grid-item
，不能靠父类名模糊匹配。
立即学习
“
前端免费学习笔记（深入）
”；
容易踩的坑：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
用
.masonry div
会命中所有后代
div
，包括卡片内部的描述、按钮等，导致布局错乱
没加
>
子选择器，结果 hover 效果或 margin 意外应用到嵌套元素上
多个瀑布流区域共存时，用相同 class 名但没加唯一前缀，CSS 规则互相覆盖
图片必须包裹在块级容器内，不能裸放
.masonry
是危险操作。原因有二：一是
break-inside
对替换元素（如
img
）支持不稳定；二是无法控制图片外的交互区域（比如点击收藏、悬停显示价格 badge）。
务必用一层
包住
.item
加
position: relative
：
¥99
这样
.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
，否则列高塌陷，所有卡片堆在一起
实际中最容易被忽略的，是 Safari 对
break-inside
的兼容性极差——必须补一句
-webkit-column-break-inside: avoid
，否则 iOS 上大概率出现图片被劈成两半的情况。