CSS 如何实现瀑布流布局？

Question

CSS 如何实现瀑布流布局？

仓乃文 · Accepted Answer

瀑布流布局通过 CSS columns 多列属性实现，让不同高度的元素自动填充到各列中，形成错落有致的布局效果。

```css
.masonry {
  column-count: 3;
  column-gap: 16px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
}
```

Grid 瀑布流（实验性）：
```css
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 16px;
}
```

补充说明：
- column-count 控制列数，column-gap 控制列间距
- break-inside: avoid 防止元素被拆分到两列
- columns 方案元素按列从上到下排列（先填满第一列再第二列）
- grid-template-rows: masonry 是实验性特性，仅 Firefox 支持
- 如需从左到右排列，推荐使用 JS 方案或 CSS Grid + grid-row-end 手动计算