Free online CSS masonry layout generator. Supports both CSS columns and CSS grid approaches. Customize column count, gap, column width, and item margins. Real-time masonry preview, one-click copy CSS and HTML code. Perfect for galleries, blogs, and portfolio pages. Client-side only.
主要有两种实现方式：1) CSS columns方案：使用column-count和column-gap属性，简单易用，项目自动排列。2) CSS Grid方案：使用grid-template-columns和grid-auto-rows，更灵活但需要设置项目样式。本工具同时支持两种方案，可根据需求选择。
columns方案优点是代码简洁、自动响应、内容按列填充；缺点是无法控制项目位置。Grid方案优点是布局精确、支持跨列；缺点是设置稍复杂。对于图片画廊或博客推荐columns方案，对于需要精确控制的布局推荐Grid方案。
瀑布流布局最适合展示高度不一致的内容，常见应用包括：图片画廊（如Pinterest、花瓣网）、博客文章列表、商品展示、作品集等。它能充分利用屏幕空间，让用户自然地浏览内容。