column-count不是真正的瀑布流，因其本质是文本流分栏，按文档顺序切分内容而非按列高度动态分配元素，导致DOM顺序与视觉列序不一致、元素易被截断、无法响应式重排且底部留白。
为什么 column-count 不是真正的瀑布流
直接用 column-count 做“瀑布流”，实际得到的是**分栏式布局（multi-column layout）**，不是 Masonry 风格的瀑布流。它会把内容按顺序切片、从上到下填满每一列，但所有列高度强制对齐——最后一行会留白，且元素不能跨列、无法响应式重排。常见错误现象是：图片高度不一时，列底参差不齐，但浏览器仍强行拉平列高，导致大量空白或错位。
关键区别在于：column-count 是 CSS 多列模块（CSS Multi-column Layout），设计初衷是排版长文（如报纸），不是为卡片网格优化的。
使用场景受限：适合文字流、固定宽高比卡片、或对底部对齐无要求的轻量展示；不适合电商商品墙、图库、动态加载卡片等需要视觉连续性的场景。
在 Bootstrap 5+ 中用 column-count 快速模拟“类瀑布流”
如果你只需要简单分栏、接受列末留白，且项目已用 Bootstrap 5+（它默认不干扰 column- 相关 CSS），可直接加自定义类：
.masonry-fallback {
column-count: 3;
column-gap: 1.5rem;
}
.masonry-fallback > * {
break-inside: avoid;
margin-bottom: 1rem;
}
注意点：
-
break-inside: avoid防止卡片被断开在两列之间（否则图文分离） - Bootstrap 的
gap类（如gap-4）对column-count无效，必须用column-gap - 响应式需手动写媒体查询：
@media (max-width: 768px) { .masonry-fallback { column-count: 1; } } - IE 完全不支持
column-count，Edge 16+ 才开始支持，无 polyfill
真正瀑布流该用什么替代 column-count
现代方案只有两个靠谱选择：
-
CSS
display: grid+grid-auto-flow: dense+grid-template-rows: masonry：目前仅 Chrome 116+ 和 Edge 116+ 支持grid-template-rows: masonry（Firefox 尚未实现），属于实验性特性，生产环境慎用 -
JavaScript 库（推荐）：如
masonry-layout或vanilla-masonry，能与 Bootstrap 共存。例如引入后初始化：const elem = document.querySelector('.masonry-container'); const msnry = new Masonry(elem, { itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true });注意：要配合 Bootstrap 的栅格隐藏/显示类（如d-none d-md-block）控制不同断点下的列数，JS 本身不响应式
性能影响明显：JS 方案需计算每个元素位置，大量卡片（>200）时首次渲染有延迟；CSS 方案（column-count）纯渲染，但语义和行为偏差大。
和 Bootstrap 栅格混用时最易踩的坑
有人试图把 column-count 和 Bootstrap 的 row/col 嵌套使用，结果完全失效——因为 row 默认是 display: flex，而 column-count 要求直系子元素是块级流式内容。
正确做法只有两种：
- 放弃 Bootstrap 栅格，用纯
column-count容器包裹卡片（每个卡片自己用class="card"即可） - 用 Bootstrap 的
container+row包裹 JS 瀑布流容器（如），再让 JS 控制内部卡片定位，此时row只起宽度约束作用，不参与布局另外，Bootstrap 5 的
card默认有margin-bottom，和column-gap叠加会导致间距翻倍，必须显式重置：.masonry-fallback > .card { margin-bottom: 0; }。真实项目里，多数人卡在“以为
column-count能自动适应卡片高度差异”，其实它只切文本流——这点一旦没意识到，调试半天也看不出问题在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
