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