纯CSS实现博客首页瀑布流首选column-count+break-inside: avoid组合，它按内容流自动分列、适配高度不一卡片、无需JS且兼容主流浏览器；Grid因行优先布局无法实现真瀑布流，仅column-count能模拟“新卡片贴最低列底边”的效果。
纯 CSS 实现博客首页文章卡片瀑布流，首选 column-count + break-inside: avoid 组合——它天然适配内容高度不一的场景，无需 JavaScript，加载即生效，且兼容性覆盖 Chrome 10+、Firefox 52+、Safari 14.1+。
为什么不用 Grid 做“真瀑布流”？
Grid 的 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 看似简洁，但它本质是**行优先布局**：卡片按 HTML 顺序从左到右、从上到下填满网格单元，不会自动流向“当前最短列”。结果就是顶部几行整齐，往下很快出现明显列高差和大片空白，尤其当文章卡片含图片、摘要长度差异大时更明显。
除非你用 grid-auto-flow: dense 配合 JS 动态计算 grid-row-end 跨行数（复杂且易出错），否则 Grid 无法模拟 Pinterest 那种“新卡片永远贴最低列底边”的视觉瀑布流。
column-count 是唯一开箱即用的纯 CSS 方案
它把容器当“报纸栏”，浏览器自动按列高切分内容流，卡片按自然文档流依次填入各列底部，高度由内容真实撑开——这才是你想要的“文章卡片自动归位”效果。
-
column-count: 3或column-width: 280px（后者更响应式，推荐） - 子项必须加
break-inside: avoid，否则长文章卡片可能被硬生生截断到两列中 - 别给卡片设
width: 100%，它会强制填满单列宽度，破坏流式行为 - 用
margin-bottom控制卡片间距，column-gap只控制列间空隙
常见错位问题怎么修？
卡片堆在左上角、错行、或随滚动“飘走”，90% 是因为没给容器设 position: relative——这在用 position: absolute 手动实现时是硬性前提，但用 column-count 时其实不需要。真正要检查的是：
- 父容器是否设置了
height或max-height？有则删掉，多列布局依赖自然高度伸展 - 卡片内是否有未设置
box-sizing: border-box的 padding/border？会导致实际宽度超列宽，触发换列异常 - 是否在卡片上误用了
float或display: inline-block？多列布局只接受块级流式子项 - 移动端 Safari 旧版对
break-inside支持不稳定，可加-webkit-column-break-inside: avoid兜底
真正麻烦的不是写法，而是内容加载时机：图片异步加载后高度突变，可能撑开当前列、挤乱后续卡片位置。这不是 CSS 能解决的，得靠 img { height: auto; min-height: 120px; } 占位，或监听 load 后触发 column-count 重绘（需 force reflow）。这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
