可视化创建Masonry/Pinterest风格布局，一键导出CSS代码
零依赖·可离线使用⚙️ 布局参数
📱 响应式断点
🎨 预览内容
👁️ 实时预览
📋 生成代码
📖 CSS瀑布流布局生成器能做什么？
CSS瀑布流布局生成器是一个在线可视化工具，帮助开发者快速创建Masonry/Pinterest风格的网页布局。通过直观的参数调节，实时预览布局效果，并一键生成CSS代码，支持CSS Columns和CSS Grid两种实现方式，以及响应式断点配置。
核心功能
- 实时预览：调整参数即时看到布局变化
- 双实现方案：CSS Columns（兼容性好）和CSS Grid masonry（实验性）
- 响应式配置：移动端/平板/桌面/大屏四个断点
- 丰富参数：列数、间距、圆角、背景色等可调
- 代码导出：一键生成完整CSS代码，含响应式媒体查询
使用教程
- 调整列数、间距等参数，预览区实时更新
- 配置响应式断点的列数
- 选择实现方式（推荐CSS Columns）
- 点击"生成"查看完整CSS代码
- 点击"复制"将代码粘贴到项目中
应用场景
场景1：图片画廊
展示不同尺寸的图片，瀑布流布局让每张图片保持原始比例，视觉上更自然美观。
场景2：博客文章列表
文章摘要长度不一，瀑布流布局避免大量空白，页面更紧凑。
场景3：电商产品展示
产品卡片内容量不同（有图/无图、有评价/无评价），瀑布流布局自适应高度。
扩展知识
CSS瀑布流布局的核心原理是CSS Multi-column Layout Module中的column-count和column-gap属性。元素按列从上到下排列，当一列填满后自动换到下一列。break-inside:avoid确保卡片不被分割到两列。CSS Grid Level 3的masonry值是更现代的方案，但目前浏览器支持有限。
📖 常见问题
什么是CSS瀑布流布局？
CSS瀑布流布局（Masonry Layout）是一种类似Pinterest的网页布局方式，元素按列排列但高度不等，新元素自动填充到最短的列下方，形成参差不齐的瀑布效果。这种布局适合图片画廊、卡片列表等高度不固定的内容展示。
CSS实现瀑布流有哪几种方式？
主要有三种方式：1) CSS Columns（column-count/column-gap）——最简单，但元素按列优先排列；2) CSS Grid + masonry（实验性功能，仅Firefox支持）；3) JavaScript库（如Masonry.js）——兼容性最好但需要JS。本工具生成CSS Columns和CSS Grid两种方案。
CSS Columns和CSS Grid瀑布流有什么区别？
CSS Columns方案：元素从上到下、从左到右排列，兼容性好，所有现代浏览器支持。CSS Grid masonry方案：元素从左到右、从上到下排列，更符合阅读习惯，但目前仅Firefox实验性支持。对于生产环境，推荐CSS Columns方案。
如何实现响应式瀑布流？
通过媒体查询调整列数：移动端1-2列，平板3列，桌面4-5列。也可以使用CSS的auto-fill和minmax实现自动列数调整。本工具支持配置不同断点的列数，自动生成响应式CSS代码。
瀑布流布局适合什么内容？
瀑布流布局最适合高度不固定的内容：图片画廊、博客文章卡片、产品展示、社交媒体动态、搜索结果、作品集展示等。对于高度固定的列表（如表格数据），传统网格布局更合适。