如何使用CSS column-count 实现瀑布流布局的初级方案

column-count不是真瀑布流，需同时满足容器设max-height/height、子项加break-inside: avoid、子项不脱离文档流三条件；否则退化为单列或卡片被劈开。

能用，但不是你想象中的“Pinterest 那种真瀑布流”——column-count 实际是按文档流切片分栏，浏览器自动把新项塞进当前最短列，前提是三个硬性条件全满足，缺一不可。

为什么写了 column-count: 3 还是单列？

浏览器看到没设高度的容器，会直接退化为 1 列。这不是 bug，是规范行为。

• max-height 或 height 必须显式写在容器上（比如 max-height: 70vh），min-height 无效
• 不要依赖父容器撑高——必须作用于瀑布流容器自身
• iOS Safari 对无高度容器 fallback 更激进，几乎必然单列

break-inside: avoid 为什么必须加在每个子项上？

不加它，卡片会被从中间劈开：标题在左列，图片掉进右列底部。这不是渲染异常，是 column 布局默认允许跨列断行。

• 必须写在每个 .item 上，写在容器上无效
• 兼容旧版 Safari 和 IE11，建议补前缀：-webkit-column-break-inside: avoid 和 page-break-inside: avoid
• break-inside: avoid-column 仅 Safari 旧版部分支持，Chrome/Firefox 不认
• 子项若用了 position: absolute，break-inside 完全失效

column-gap 和 margin-bottom 能混用吗？

不能。混用会导致列高计算错乱，出现一列堆满、另一列大片留白。

立即学习“前端免费学习笔记（深入）”；

• column-gap 是列与列之间的通道，浏览器会把它纳入列高分配逻辑
• margin-bottom 是子项自身占用空间的一部分，干扰“哪列最短”的判断
• 统一用 column-gap: 16px 控制列间距，别给 .item 加 margin-bottom
• 想控制卡片内边距？改用 padding，它不影响列高分配

真正容易被忽略的是图片加载异步带来的高度抖动——DOM 渲染时图片还没加载完，列高预估失准，首屏就错位。提前用 aspect-ratio 或 padding-top 占位，比等 JS 补救更可靠。