column-count不是真瀑布流，需同时满足容器设max-height/height、子项加break-inside: avoid、子项不脱离文档流三条件；否则退化为单列或卡片被劈开。
能用，但不是你想象中的“Pinterest 那种真瀑布流”——column-count 实际是按文档流切片分栏，浏览器自动把新项塞进当前最短列，前提是三个硬性条件全满足，缺一不可。
为什么写了 column-count: 3 还是单列？
浏览器看到没设高度的容器，会直接退化为 1 列。这不是 bug，是规范行为。
-
max-height或height必须显式写在容器上（比如max-height: 70vh），min-height无效 - 不要依赖父容器撑高——必须作用于瀑布流容器自身
- iOS Safari 对无高度容器 fallback 更激进，几乎必然单列
break-inside: avoid 为什么必须加在每个子项上？
不加它，卡片会被从中间劈开：标题在左列，图片掉进右列底部。这不是渲染异常，是 column 布局默认允许跨列断行。
- 必须写在每个
.item上，写在容器上无效 - 兼容旧版 Safari 和 IE11，建议补前缀：
-webkit-column-break-inside: avoid和page-break-inside: avoid -
break-inside: avoid-column仅 Safari 旧版部分支持，Chrome/Firefox 不认 - 子项若用了
position: absolute，break-inside完全失效
column-gap 和 margin-bottom 能混用吗？
不能。混用会导致列高计算错乱，出现一列堆满、另一列大片留白。
-
column-gap是列与列之间的通道，浏览器会把它纳入列高分配逻辑 -
margin-bottom是子项自身占用空间的一部分，干扰“哪列最短”的判断 - 统一用
column-gap: 16px控制列间距，别给.item加margin-bottom - 想控制卡片内边距？改用
padding，它不影响列高分配
真正容易被忽略的是图片加载异步带来的高度抖动——DOM 渲染时图片还没加载完，列高预估失准，首屏就错位。提前用 aspect-ratio 或 padding-top 占位，比等 JS 补救更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
