📐 CSS 瀑布流布局

瀑布流是一种常见的图片展示布局方式。

columns 属性

使用 CSS 的 columns 属性可以轻松实现瀑布流：

1
2
3
4
.cat-waterfall {
  columns: 200px 3;
  column-gap: 16px;
}

关键点

  • columns: 200px 3 表示每列最小 200px，最多 3 列
  • break-inside: avoid 防止卡片被截断

响应式

配合 auto-fit 和 minmax 可以实现自适应列数。