column-count 做瀑布流易致卡片被切断、底部不齐、响应式错乱及无法精准控列，需配合 break-inside: avoid、column-gap、column-fill 等修复，并在复杂场景改用 grid 或 js 方案。
column-count 直接分栏会把卡片硬切开
用 column-count 做瀑布流，最常踩的坑就是卡片被从中间劈成两半——比如一个带标题、图片、描述的 .card 元素，可能标题在第一栏，图片在第二栏。这是因为 column 布局默认允许内容跨列断行，对块级元素不天然“保护”。
必须加这两条才靠谱：
-
break-inside: avoid;（写在卡片上，告诉浏览器“别在这儿断开”） -
column-gap: 1rem;（显式设间隙，否则默认是 1em，容易误判留白）
注意：IE10+ 支持 break-inside，但旧版 Safari 需要 -webkit-column-break-inside: avoid;，如果还要兼容 iOS 9 以下，得加前缀。
卡片高度不一致时，column-count 会出现底部空隙
当各卡片高度差异大（比如有的 200px，有的 400px），column-count: 3 会按列高大致均分，但最后一列往往提前结束，留下大片空白。这不是 bug，是 column 布局的固有行为：它优先保证列数，不保证底部对齐。
立即学习“前端免费学习笔记（深入）”；
解决思路不是强行拉高，而是接受“不齐”，并用视觉手段弱化：
- 给容器加
column-fill: balance;（默认值，但显式声明更稳妥） - 避免给卡片设固定
height，改用min-height控制底线 - 用
background: linear-gradient(...)或 subtle border-bottom 模拟“延伸感”，别依赖物理对齐
真要严格等高，就别用 column，该上 display: grid + grid-template-columns: repeat(3, 1fr)，但那就不是瀑布流了。
响应式切换 column-count 容易导致重排错乱
用媒体查询改 column-count 数值（比如从 3 → 1），浏览器会重新计算列宽和断点，卡片顺序可能跳变，甚至出现重复渲染痕迹（尤其配合 JS 动画时）。
稳妥做法是：
- 只在
min-width断点上调，不用max-width（避免小屏反复触发） - 给容器加
transition: column-count 0.2s ease，虽不能平滑过渡内容，但能缓解视觉突兀 - 如果卡片内含图片或异步加载内容，确保它们有明确宽高比（如用
aspect-ratio或 padding-top hack），否则列宽变化时图片重绘会拖慢重排
别指望 column-count 在移动端小屏下还保持“3 列瀑布”，手机上 1 列才是合理预期。
无法精确控制某张卡片落在哪一列
column-count 是纯流式布局，浏览器按内容自然填充，你没法指定第 5 张卡一定出现在第二列。想做广告位、置顶卡、或者按数据权重排序落列？它做不到。
这时候得换方案：
- 用 JavaScript 计算每列当前高度，手动
appendChild到最短列（即传统 JS 瀑布流） - 改用 CSS
grid+grid-auto-flow: dense配合grid-row-end显式控制（但需预知卡片数量或用 JS 注入 span） - 后端直接按列分组返回 HTML 片段（服务端渲染场景下最稳）
column-count 的定位从来就不是“精准调度”，而是“足够快、足够轻、足够接近”。想精细控制，就等于主动放弃它的优势。
