CSS columns 实现瀑布流轻量易维护，但属按列顺序切割的“伪瀑布流”，适合内容长度相近场景；需用 column-count 与 column-gap 控制列数和间距，子项加 break-inside: avoid 防断行，图片设 aspect-ratio 或 padding-top 避重排，响应式推荐 column-width 结合 column-count 限制上限。
用 CSS
实现基础瀑布流，确实比 JavaScript 方案更轻量、更易维护，但要注意它并非“真瀑布流”——内容按列顺序切割，而非按高度动态分配。适合内容长度相近、对首屏加载性能敏感的场景（比如图片卡片列表、博客摘要页）。
column-count + column-gap 控制列数与间距
这是最核心的组合。指定列数后，
浏览器
会自动将子元素按文档流顺序分列排布，类似报纸排版：
表示最多显示 3 列（实际列数可能因容器宽度不足而减少）
设置列间空白，推荐用
或
，避免用
导致响应异常
容器需设置
或
，否则在
弹性布局
中可能撑满父容器导致列数失效
避免子项被意外断行或截断
默认情况下，块级子元素（如
）可能在列内被拆开，影响视觉完整性：
给子项加
（Chrome/Firefox/Edge 支持良好）
若需兼容旧版 Safari，可配合
+
，但会失去 flex 布局能力
慎用
固定子项高度，否则容易造成列高严重不均，违背瀑布流本意
处理图片加载导致的重排问题
图片未设宽高时，加载后会触发列内容重排，出现“抖动”：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
为图片设置
（现代浏览器）或
占位（如
配合
）
使用
统一裁剪样式，避免拉伸变形
可搭配
和低质量占位图（LQIP），提升感知加载速度
响应式列数适配建议
不要只靠媒体查询硬切列数，可结合
让浏览器自动计算：
用
替代
，容器会尽可能容纳宽度 ≥300px 的列
再用
设上限，防止小屏下生成过多窄列
移动端可强制
，确保单列阅读体验
不复杂但容易忽略：column 布局依赖文档流顺序，无法像 JS 瀑布流那样按高度排序。如果业务强依赖“最短列优先”，仍需 JS 方案；但多数内容展示场景，CSS columns 已足够稳健高效。
columnscolumn-count: 3column-gap: 20pxrempx%widthmax-widthdiv.cardbreak-inside: avoiddisplay: inline-blockvertical-align: topheightaspect-ratiopadding-toppadding-top: 100%position: relativeobject-fit: coverloading="lazy"column-widthcolumn-width: 300pxcolumn-countcolumn-count: 6column-count: 1