column-count是目前唯一原生支持瀑布流语义的CSS方案，它让内容像报纸分栏一样自然流动，浏览器自动将后续内容塞入当前最短列尾部；必须用column-count（或column-width），配合break-inside: avoid、column-gap等属性，并避免overflow:hidden或transform干扰。
display: grid 本身不支持真正的瀑布流（即“填充最短列”），所谓“Grid 瀑布流”是常见误解。你看到的 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 实际生成的是**等高行布局**，不是瀑布流——所有项目按行从左到右、从上到下排列，每行高度由该行最高项决定，视觉上是“砖墙式”，而非“参差错落”的瀑布效果。
为什么 grid + auto-fill 不是瀑布流
它本质是二维网格：元素严格按行分配，不会跨行“掉落”到前一列底部。比如三列布局中，第4个元素一定在第2行第1列，而不是“追加到当前最短列末尾”。这导致：
- 列高严重不均，尤其当卡片高度差异大时，底部会出现大片空白
- Tab 键导航顺序是“逐行”，不是“逐列”，可访问性不符合瀑布流预期
- 无法实现“滚动到底部自动加载并插入最短列”的逻辑，需额外 JS 干预
column-count 是目前唯一原生支持瀑布流语义的 CSS 方案
它让内容像报纸分栏一样自然流动，浏览器自动将后续内容塞入当前最短列尾部。关键点：
- 必须用
column-count（或column-width），不能用grid -
break-inside: avoid必须加在子项上，否则图文可能被硬生生劈成两半 - 容器不能设
height，否则会触发截断，破坏无限滚动能力 - 列间距用
column-gap，不是gap；子项垂直 margin 会失效，改用margin-bottom模拟
遇到 column-count 不生效的典型原因
实际项目里常卡在这几个地方：
- 父容器有
overflow: hidden或transform，会创建新的层叠上下文，导致分栏失效 - 子项用了
display: flex或display: grid，内部布局会干扰分栏流式行为 - 在 Safari 旧版本（break-inside: avoid 对
figure或div支持不稳定，可降级为break-inside: avoid-column - 想响应式切换列数？别用媒体查询改
column-count——动画不生效，应改用column-width配合min-width
真正要“自动填充最短列”，现在（2026年5月）只有 column-count 能原生做到。所谓 Grid 瀑布流，是拿错工具硬凑效果；而 column 方案看着简单，细节全在边界条件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
