column-count + break-inside: avoid 是唯一无需 JS 的真瀑布流方案，需容器设 height/max-height、子项为普通块级流且每个子项加 break-inside: avoid，否则退化单列或卡片被劈开。

column-count + break-inside 是目前唯一无需 JS 就能实现“按列高自动插入最短列”的纯 CSS 瀑布流方案，但必须满足三个硬性条件：容器有 height/max-height、子项是普通块流、每个子项都加 break-inside: avoid。

为什么加了 column-count 还是单列？

浏览器看到没有高度约束的容器，会认为“空间无限”，直接退化为 1 列——这不是 bug，是规范行为。

• 必须给容器设 height 或 max-height（哪怕只是 max-height: 100vh）
• column-width 和 column-count 不能同时设具体值，否则 column-width 被忽略
• Flex/Grid 容器内的子项会脱离文档流，column-count 完全失效；子项得是裸
  、

  、 等原生块级元素

  break-inside: avoid 为什么必须写在每个 .item 上？

  不加它，长卡片会被从中间劈开：标题在第一列，图片和描述掉到第二列底部。这不是渲染错误，是 column 布局默认允许跨列断行。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  • 写法只能是 break-inside: avoid，break-inside: avoid-column 只在旧 Safari 里部分生效，Chrome/Firefox 不认
  • 必须作用于每个子项（如 .item），写在容器上无效
  • 兼容旧版 Safari 和 IE11，建议补前缀：-webkit-column-break-inside: avoid 和 page-break-inside: avoid

  column-gap 和 margin-bottom 到底该用哪个？

  column-gap 是列与列之间的“通道”，浏览器会把它纳入列高计算；而 margin-bottom 是子项自身占用空间的一部分，会干扰“哪列最短”的判断，导致填充错乱。

  • 统一用 column-gap: 16px 控制列间距，别碰 margin-bottom
  • 想控制卡片内边距？改用 padding，它不影响列高分配逻辑
  • 响应式时优先改 column-count：比如 @media (max-width: 768px) { .masonry { column-count: 2; } }

  真正难处理的是图片加载异步带来的高度抖动——浏览器按 DOM 渲染时图片还没加载完，列高预估失准。解决方案不是加 JS，而是提前设 img 的宽高比容器（如 aspect-ratio: 4/3）或用 min-height 占位。这点容易被忽略，但直接影响首屏瀑布流是否“一眼就对”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！