对于瀑布流这种布局方式，相信很多小伙伴都接触过了，如下图所示。
很多人以为实现这种 “参差不齐” 的卡片排版必须计算高度或使用 JavaScript。实际上，现代浏览器支持的 CSS 多列布局（columns）已经能解决 90% 的瀑布流需求了。在 Tailwind CSS 中，我们只需要使用几个类名即可轻松实现。
Tailwind CSS 瀑布流语法
在 Tailwind CSS 中，实现瀑布流布局的核心逻辑在于：将容器划分为多列，并防止内部卡片被 “切断”。其中，我们需要配合使用以下 2 组类名：
1. 设置列数
columns-{count}：设置布局的列数。- 常用类名：columns-2、columns-3、md:columns-4 等。
gap-{size}：设置列与列之间的间距。
2. 防止卡片断开
break-inside-avoid：这是瀑布流卡片的 “必加项”。如果不加，当一个卡片正好位于列的底部时，它可能会被强行拆分成两半，一半在左边，一半在右边，视觉效果非常差。
Tailwind CSS 瀑布流示例
接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来实现瀑布流布局。
示例：瀑布流布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-8 bg-green-50 min-h-screen">
<div class="max-w-6xl mx-auto">
<h2 class="mb-10 text-3xl font-black text-center text-emerald-900">绿叶精品课</h2>
<div class="columns-1 md:columns-2 lg:columns-3 gap-6">
<div class="break-inside-avoid mb-6 bg-white p-4 rounded-3xl shadow-sm border border-emerald-100">
<div class="w-full h-64 bg-emerald-100 rounded-2xl mb-4"></div>
<h3 class="font-bold text-emerald-900">Vue 快速上手</h3>
<p class="mt-2 text-sm text-emerald-800/60">Vue 全家桶（Vite、Vue Router、Pina 等）</p>
</div>
<div class="break-inside-avoid mb-6 bg-white p-4 rounded-3xl shadow-sm border border-emerald-100">
<div class="w-full h-32 bg-green-200 rounded-2xl mb-4"></div>
<h3 class="font-bold text-emerald-900">SQL 快速上手</h3>
<p class="mt-2 text-sm text-emerald-800/60">“保姆级” SQL 入门教程</p>
</div>
<div class="break-inside-avoid mb-6 bg-white p-4 rounded-3xl shadow-sm border border-emerald-100">
<div class="w-full h-48 bg-teal-100 rounded-2xl mb-4"></div>
<h3 class="font-bold text-emerald-900">Python 十大项目</h3>
<p class="mt-2 text-sm text-emerald-800/60">采用 10 个当下最热门项目来讲解</p>
</div>
<div class="break-inside-avoid mb-6 bg-white p-4 rounded-3xl shadow-sm border border-emerald-100">
<div class="w-full h-72 bg-emerald-50 rounded-2xl mb-4"></div>
<h3 class="font-bold text-emerald-900">Tailwind CSS 实战</h3>
<p class="mt-2 text-sm text-emerald-800/60">采用 Tailwind CSS v4 版本讲解</p>
</div>
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们实现纯 CSS 瀑布流的秘诀在于：
- columns 系列类名：我们在容器上设置了 columns-1 md:columns-2 lg:columns-3。这不仅决定了列数，还能自动处理内容的流转。注意，这种布局的排版顺序是 “从上到下、再从左到右”。
- break-inside-avoid：在每一个内部卡片（div）上，我们都加上了这个类名。它用于确保卡片作为一个整体被渲染，而绝对不会出现内容被截断跨列显示的 Bug。
- 间距处理：我们配合使用了容器的 gap-6（处理列间距）和在每个卡片上添加 mb-6（处理行间距），使得网格看起来更加匀称。注意：在多列布局中不要在父容器上使用 space-y-*，否则会导致各列顶部无法齐平。
常见问题
1. 瀑布流的排序顺序是怎样的？
这是一个需要注意的地方。CSS columns 布局的填充顺序是 “垂直方向” 的：它会先填满第 1 列，再去填第 2 列。
也就是说，如果你的数据是按照时间排序的，那么最新的内容会出现在第 1 列的顶部，次新的在第 1 列下方。这与 JavaScript 瀑布流（通常按高度插入）略有不同。
2. 为什么我的卡片背景色在手机端不一致呢？
这通常是因为没有正确设置 break-inside-avoid。如果不设置这个属性，浏览器为了填满列的高度，可能会把卡片切开，导致背景色和阴影看起来断开了。
