column-count仅能实现视觉近似瀑布流，因按文档流切片分栏导致dom与视觉顺序错位；必须设max-height、break-inside: avoid及column-gap，且仅适用于静态、高度一致、无交互的场景。
column-count 能快速实现瀑布流，但只适合静态、高度可控的场景；动态内容或需要精确控制视觉顺序时，它会出问题。
为什么 column-count 看似简单却容易翻车
它把容器当成一个“长文本”来切分，不是按子元素分配列。浏览器按内容高度均分区域，再把 DOM 顺序的元素依次塞进去——结果就是左边一列堆满，右边才开始填，视觉上严重失衡。
- DOM 顺序 = 左列从上到下 + 右列从上到下，不是你期望的“一行一行填”
-
break-inside: avoid必须加，否则图片和文字可能被劈开 - 图片未加载完时高度为 0，导致列高塌陷、重排错乱，得靠
aspect-ratio或min-height预占位 - 响应式改列数（比如
@media里从column-count: 3改成2）会触发整列重流，没有过渡动画
column-width 比 column-count 更适合响应式
用 column-width 让浏览器自动算列数，比死锁列数更灵活。但必须配 column-gap 才生效——单独写 column-gap 是无效的。
- 正确写法：
column-width: 280px; column-gap: 16px;，不要设column-count -
column-gap单位建议用px，em会随字体缩放，列间距忽大忽小 - 子项垂直间距只能靠
margin-bottom，别用margin-top，:first-child在多列里不可靠 - Firefox 支持原生
grid-template-rows: masonry，但其他浏览器直接忽略，不能当通用解
纯 CSS 瀑布流根本做不了这些事
如果你的页面要支持：用户滚动到底部加载新卡片、点击某张图后定位到它、或者卡片带展开/折叠交互——column-count 就撑不住了。
-
getBoundingClientRect()返回的位置是错的，因为视觉位置 ≠ DOM 顺序位置 - 新增元素后，不会自动重排，得手动触发
force reflow（比如改style.width），但没动画 - 无法对单个卡片做位移动画，
transition对列内位置变化完全无效 - SEO 和屏幕阅读器看到的是左列全读完才读右列，语义断裂
什么情况下可以放心用纯 CSS
只有同时满足这四点，才推荐用 column-count：内容静态、高度基本一致、不需 JS 交互、不care DOM 顺序。
- 博客归档页、文档章节列表、固定尺寸图标网格
- 预设好所有卡片
min-height或aspect-ratio，避免加载抖动 - 用
-webkit-column-count/-moz-column-count加兼容前缀，IE 不用管了 - 真要加动画，只做
opacity和scale进场，放弃位置过渡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
