免费在线CSS瀑布流（Masonry）布局生成器。支持CSS columns和CSS grid两种方案，可自定义列数、列间距、列宽和项目边距。实时预览瀑布流布局效果，一键复制CSS和HTML代码。适合前端开发者创建相册、博客、作品集等页面。纯前端处理。
使用CSS瀑布流布局生成器生成内容只需三个简单步骤：
主要有两种实现方式：1) CSS columns方案：使用column-count和column-gap属性，简单易用，项目自动排列。2) CSS Grid方案：使用grid-template-columns和grid-auto-rows，更灵活但需要设置项目样式。本工具同时支持两种方案，可根据需求选择。
columns方案优点是代码简洁、自动响应、内容按列填充；缺点是无法控制项目位置。Grid方案优点是布局精确、支持跨列；缺点是设置稍复杂。对于图片画廊或博客推荐columns方案，对于需要精确控制的布局推荐Grid方案。
瀑布流布局最适合展示高度不一致的内容，常见应用包括：图片画廊（如Pinterest、花瓣网）、博客文章列表、商品展示、作品集等。它能充分利用屏幕空间，让用户自然地浏览内容。