CSS 瀑布流 Demo
提供两种纯 CSS 瀑布流方案:columns 与简易 Grid。
columns 瀑布流(兼容性好)
使用 column-count + break-inside: avoid 构建,绝大多数现代浏览器可用。
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
示例卡片
可变高度内容
简易 Grid 瀑布流
纯 CSS Grid 切片:grid-auto-rows + grid-auto-flow: dense + 行跨度。
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例
卡片
Grid 切片示例