column-count无法卡住卡片高度，因其按内容流切分列且不感知子元素边界，导致卡片跨列断裂；需配合break-inside: avoid阻止断裂，但safari 15.4+才稳定支持，响应式切换易出空白，推荐改用grid模拟伪瀑布流。
多列布局column-count为什么卡不住卡片高度？
因为column-count只负责把内容流式切分成列，不感知子元素边界——卡片一旦跨列断开（比如被截成两半），视觉就崩了。它适合纯文本流，不适合“块级容器需完整保留在一列内”的场景。
实操建议：
- 必须配合
break-inside: avoid（或page-break-inside: avoid兼容旧版）阻止卡片在列内断裂 - Chrome/Firefox 支持良好，但 Safari 15.4+ 才稳定支持
break-inside在多列中的表现 - 别用
display: inline-block或float混搭，会破坏列流逻辑
Bootstrap 5 卡片 + column-count 的最小可行写法
直接套用 Bootstrap 的.card类没问题，但默认卡片有margin-bottom，会导致列末尾留白错位。
实操建议：
- 给容器加
column-count: 3和column-gap: 1.5rem（匹配 Bootstrap 的g-3间距） - 卡片统一加
break-inside: avoid，并重置margin-bottom: 0 - 容器本身不要设
height，否则列高被截断，瀑布效果失效
.card-container {
column-count: 3;
column-gap: 1.5rem;
}
.card-container .card {
break-inside: avoid;
margin-bottom: 0;
}
响应式列数切换时的常见断裂现象
用媒体查询改column-count值后，卡片常突然重排、出现大片空白，甚至某列空着——这不是 bug，是多列布局的固有行为：它按内容流顺序填列，不回溯重平衡。
实操建议：
- 避免在小屏下用
column-count: 1，改用 Flex 或 Grid 更可控 - 如果坚持多列，用
column-fill: balance（默认值，但显式声明更稳妥） - 列数变化时，浏览器不会触发重排动画，所以别对过渡效果抱期待
比多列更靠谱的“伪瀑布流”替代方案
真瀑布流（如 Masonry）需要 JS 计算位置，CSS 原生不支持。但用display: grid配合grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))能模拟出接近效果，且卡片不碎、响应自然。
实操建议：
- Grid 方案中，卡片无需
break-inside，天然保持完整 - 若需等高卡片（Bootstrap 默认不等高），加
align-items: start防拉伸 - 注意：Grid 不是瀑布流，它是“行优先填充”，视觉上整齐，但高度差异大时顶部对齐感不如 Masonry
column-count撑场面，不如早换 Grid 或接受 JS 方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
