使用css多列布局或Grid可高效实现卡片瀑布流。1. 多列布局通过column–count和break-inside: avoid实现高度自适应且不截断的列分布；2. grid布局利用repeat(auto-fill, minmax(250px, 1fr))和gap创建响应式等宽网格，适合现代浏览器；若需视觉上真正的瀑布流，则需javaScript辅助。
要实现卡片瀑布流布局，最简单高效的方式是使用 CSS 的 多列布局（multi-column） 或 CSS Grid 结合 gap 和 auto-fill。下面介绍两种实用且兼容性较好的方法。
方法一：使用 CSS 多列布局（适合文本类或高度不一的卡片）
这种方法特别适合内容长度不同的卡片，比如博客文章、图片集等，浏览器会自动将子元素按高度分配到各列中。
示例代码：
html：
<div class=”masonry-container”>
<div class=”card”>卡片1</div>
<div class=”card”>卡片2</div>
<div class=”card”>卡片3</div>
…
</div>
CSS：
.masonry-container {
column-count: 3;
column-gap: 1rem;
padding: 1rem;
}
.card {
background: #f0f0f0;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
break-inside: avoid; / 防止卡片在列内被截断 /
}
说明：
– column-count 控制列数，可设为 3 或 4。
– break-inside: avoid 确保每张卡片不会被拆分到两列中。
方法二：使用 CSS Grid 实现等宽瀑布流（推荐现代布局）
Grid 布局更灵活，适合响应式设计。虽然不能像 js 那样精确控制每列高度，但通过 grid-auto-flow: dense 可以优化排列。
立即学习“前端免费学习笔记（深入）”；
示例代码：
CSS：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
padding: 1rem;
}
.grid-item {
background: #f0f0f0;
border-radius: 8px;
padding: 1rem;
height: fit-content; / 让高度由内容决定 /
}
说明：
– minmax(250px, 1fr) 表示每列最小 250px，最大 1fr，自动换行填充。
– gap 提供卡片之间的间距。
– 这种方式不是传统“视觉瀑布流”，但在大多数场景下表现良好，尤其适合响应式网页。
补充建议
如果需要真正的视觉瀑布流（每列高度均衡），纯 CSS 有局限，需借助 javascript（如 Masonry.js 或自定义算法）。但在多数现代项目中，上述 Grid 或多列方案已足够使用，性能更好，维护更简单。
基本上就这些，选哪种取决于你的内容结构和浏览器支持要求。