column-count 是兼容 IE10+ 的轻量 CSS 瀑布流方案，通过将容器设为多栏布局实现卡片流式排列，需配合 break-inside: avoid 防止卡片跨列断裂，并用 column-gap 控制间距，适合文本为主、高度不一的卡片场景。
用 column-count 实现卡片瀑布流，是纯 CSS 方案中最轻量、兼容性较好（IE10+）的一种方式，适合内容以文本流为主、卡片高度不一的场景。它不是传统 JavaScript 瀑布流（如 Masonry），但视觉上接近，且无需 JS。
column-count 的核心逻辑
它把容器当成“报纸栏”，将子元素按文档流顺序依次填入各列，自动平衡列高。卡片必须是 块级元素（如 div），不能是 inline 或 flex 子项；也不能设 float 或 position: absolute，否则会脱离文档流，无法被分栏识别。
- 列数由
column-count控制（如column-count: 3） - 列间距用
column-gap设置（推荐至少1rem避免拥挤） - 列内卡片之间默认有
margin-bottom，但列间不会自动对齐底部——这是它和 Masonry 的关键区别
基础写法示例
HTML 结构保持简单线性：
... ... ...
CSS 只需几行：
立即学习“前端免费学习笔记（深入）”；
.masonry {
column-count: 3;
column-gap: 1.2rem;
}
.card {
break-inside: avoid; /* 关键！防止卡片被断开跨列 */
margin-bottom: 1.2rem;
}注意：break-inside: avoid 必须加在卡片上，否则长卡片可能被硬生生切到两列里。
响应式列数控制
用媒体查询动态调整列数，比 JS 更高效：
.masonry { column-count: 1; }
@media (min-width: 576px) { .masonry { column-count: 2; } }
@media (min-width: 992px) { .masonry { column-count: 3; } }
@media (min-width: 1200px) { .masonry { column-count: 4; } }列数不宜过多（一般 ≤4），否则小屏幕下卡片过窄，影响阅读；大屏也不建议超过 5 列，易造成首屏信息密度过高。
常见问题与绕过技巧
-
卡片内图片拉伸/错位？ 给图片设
width: 100%; height: auto;，并确保父容器不设固定高度 -
最后一列明显短一截？ 这是正常行为——
column-count不强制等高，而是按内容流分配。若强求视觉平衡，可微调卡片margin-bottom或用伪元素占位（不推荐复杂 hack） -
需要悬停动效或点击展开？ 完全支持，只要不改变卡片的文档流位置（比如别用
transform: scale()触发重排，用opacity + transform更稳妥）
基本上就这些。它不复杂但容易忽略 break-inside: avoid 和列间隙控制。适合内容型站点、博客列表、作品集预览等场景。真要像素级对齐或支持拖拽排序，再上 JS 方案也不迟。
