column-count 是最轻量且兼容性好的纯 css 瀑布流方案，适用于流式卡片布局，但无法精确控制列高或卡片顺序；它依赖文档流切分，需配合 break-inside: avoid 防止截断，不支持绝对定位等脱离流的操作。
CSS 的 column-count 是最轻量、兼容性好、真正纯 CSS 实现瀑布流的方式，但仅适用于内容流式排列的卡片（比如文章列表、图片卡片），不支持精确控制每列高度或卡片顺序。
为什么不用 flex 或 grid 做“真瀑布流”
很多人一上来就查 display: flex 或 grid-template-columns，结果发现卡片是“横向逐行填满”，不是“按列依次落下”的瀑布效果。这是因为：flex 默认主轴是行，grid 默认按网格坐标定位——它们天生不模拟多列文档流。
-
flex-wrap: wrap只能实现等高行布局，卡片高度不一时会出现明显空隙 -
grid配合grid-auto-flow: dense也不能自动把短卡片“塞进”前面列的剩余空间，它仍按轨道分配 - JavaScript 方案（如 Masonry）能做真瀑布流，但增加加载、重排、响应式复杂度，且 SEO 不友好
column-count + break-inside: avoid 是关键组合
浏览器原生多列布局（column-count）会把子元素当作连续文本流切分，配合 break-inside: avoid 就能阻止卡片在列内被截断，从而形成视觉上的“列优先”瀑布效果。
- 必须给容器设
column-count: 3（或用column-width实现响应式） - 每个卡片加
break-inside: avoid（Firefox 还需page-break-inside: avoid） - 卡片不能用
display: inline-block或float，否则脱离文档流，列切分失效 - 所有卡片需为块级元素（
div默认满足），且无固定高度（否则可能撑乱列高）
article {
column-count: 3;
column-gap: 1rem;
}
article > .card {
break-inside: avoid;
page-break-inside: avoid; /* 兼容 Firefox */
margin-bottom: 1rem;
}
响应式怎么写？别用媒体查询硬切 column-count
直接用 column-width 更自然：它表示“每列最小宽度”，浏览器会根据容器宽度自动算出实际列数，比手动写 @media (max-width: 768px) { column-count: 1 } 更鲁棒。
-
column-width: 300px意味着：容器宽 ≥ 600px → 至少 2 列；≥ 900px → 至少 3 列 - 搭配
column-gap控制间距，避免窄屏下卡片被压扁 - 移动端小屏幕下，列宽不足时自动退化为单列，无需额外 hack
- 注意：不要同时设
column-count和column-width，后者优先级更高
常见翻车点：卡片内有绝对定位或 transform
一旦卡片里用了 position: absolute、transform 或 margin-top: -20px 这类脱离文档流的操作，break-inside: avoid 就会失效——浏览器无法准确判断卡片真实高度，导致卡片被错误截断或跨列错位。
- 解决方案：把绝对定位元素包在
position: relative的子容器里，确保卡片自身仍保持正常流高度 - 慎用
aspect-ratio+object-fit组合，某些旧版 Safari 会误判高度 - 如果卡片含异步加载图片，记得给
img设height或用aspect-ratio占位，否则加载前高度为 0，列布局塌陷
真正的难点不在代码行数，而在于接受「瀑布流本质是内容流切分」这个前提——它不保证每列像素级等高，也不支持卡片跨列合并。想让第 2 列顶部对齐第 1 列第三张卡片？那已经不是 CSS 瀑布流的职责范围了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
