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 方案也不迟。