column-count在Bootstrap 5中错位是因为其依赖块级流，而.row默认display: flex破坏文档流，导致column-count静默失效；必须用独立容器、移除flex、子项设break-inside: avoid并配合媒体查询响应式控制列数。
column-count在Bootstrap 5中为何总是错位
纯CSS的column-count不是“开箱即用”的瀑布流，它和Bootstrap 5的.row（flex容器）天然冲突。一旦把.col-*<code>类留在子项上，或让<code>.row保留display: flex，浏览器就会忽略column-count——不是报错，而是静默失效，结果就是单列堆叠或列宽崩塌。
- 必须移除所有
.row上的display: flex（可加style="display: block"强制退回到块级流） - 子项不能套在
.col-md-4之类内部；应直接给子项加width或用grid-sizer逻辑模拟列宽 -
column-gap要设在容器上，别依赖margin，否则间隙会翻倍
break-inside: avoid到底该加在哪
不加break-inside: avoid，卡片大概率被硬生生切在两列中间——文字断在半句、图片被截成两半。但加错位置也没用：它必须作用于**每个瀑布流子项的最外层容器**，比如<article class="item">或<div class="card-wrapper">，而不是.card内部元素。
- 推荐写法：
.item { break-inside: avoid; }（注意是avoid，不是avoid-column；后者兼容性差） - 若子项含
<img>，务必同步设img { max-width: 100%; height: auto; }，否则撑破列宽导致break-inside失效 - Firefox表现最稳；Chrome旧版本需额外加
column-fill: auto防初始错位
响应式列数切换时CSS方案怎么不崩
只靠@media改column-count数值远远不够。Bootstrap 5的断点（如md对应768px）和column-count生效条件不联动，窗口缩放过程中常出现“列数跳变延迟”或“临时单列闪屏”。
- 正确做法：用
@media (min-width: 576px)、(min-width: 768px)等显式匹配Bootstrap断点，并为每个区间单独定义column-count和column-gap - 列宽不能靠
.col-*<code>类推算；应统一用<code>width: calc((100% / N) - G)（N=列数，G=间隙）控制子项宽度 - 必须用
@supports (column-count: 3)包裹整套规则，并提供flex-wrapfallback，否则Safari 15及更早版本直接白屏
为什么你看到的“CSS Masonry”根本不是Masonry
网上所谓“grid-template-rows: masonry”目前（2026年6月）仅在Chrome 116+启用，且需手动开启实验标志；Safari、Firefox完全不识别。你写的那行代码，在绝大多数用户浏览器里会被当作无效声明忽略。
立即学习“前端免费学习笔记（深入）”；
- 真正起效的只有
column-count+break-inside这套组合，但它本质是“多栏流”，不是Masonry——无法跨列填空，高度差异大时仍留白 - 如果项目要求严格对齐、支持懒加载图片、或需点击定位到某张图，CSS方案必然失败；此时
masonry-layout+imagesLoaded仍是唯一可靠路径 - 别被“纯CSS”诱惑：服务端预设
data-height再JS模拟，听着轻量，实则增加构建复杂度和首屏延迟
真正麻烦的不是写几行CSS，而是判断什么时候该放弃CSS——当设计稿要求卡片高度差异超过2倍、需要支持iOS 15以下设备、或页面含异步图片时，column-count就只是个视觉安慰剂。
