# CSS 瀑布流布局生成器 生成纯 CSS 的瀑布流布局代码，支持响应式断点、间距设置和可跳过元素 > 标准页面: https://elysiatools.com/zh/tools/css-masonry-layout-generator - **分类:** Development - **关键词:** css, masonry, 瀑布流, 布局, grid ## 概述 输入列数、容器宽度、间距和断点规则，再选择使用 CSS columns 还是 Flexbox 实现。工具会输出带注释、可直接复制的 HTML 与 CSS。 使用方式： - 列数：最大断点下的目标列数 - 容器宽度：支持 1200px、100%、min(1200px, 100%) 等任意 CSS 宽度 - 间距：如 16px 或 1rem - 布局引擎：CSS columns 更像经典瀑布流；Flexbox 更容易控宽 - 响应式断点：每行一条，例如 640:2、960:3、1280:4 - 跳过元素：需要全宽或跳出常规流的选择器，例如 .masonry__item--featured 输出内容： - 可复制 HTML 结构 - 注释化 CSS - 断点和跳过元素摘要 ## 输入项 - **列数** (number) - **容器宽度** (text) - **间距** (text) - **布局引擎** (select) - **响应式断点** (textarea): 640:2 960:3 1280:4 - **跳过元素** (textarea): .masonry__item--featured .masonry__hero ## 适用场景 - 需要在图片画廊、作品集或电商商品页中实现高度不一的卡片瀑布流排版时。 - 希望避免引入繁重的 JavaScript 库，仅使用纯 CSS 实现高性能瀑布流布局时。 - 需要快速生成支持多端响应式断点（如移动端单列、平板双列、桌面多列）的布局代码时。 ## 工作原理 - 设置基础参数：输入最大断点下的目标列数、容器总宽度（如 1200px 或 100%）以及卡片间距（如 16px）。 - 配置高级规则：选择布局引擎（CSS Columns 或 Flexbox），并按需输入响应式断点规则（如 960:3）和需要全宽展示的跳过元素选择器。 - 获取代码：工具将自动生成对应的 HTML 骨架和带有详细注释的 CSS 代码，直接复制到项目中即可使用。 ## 使用案例 - 摄影师个人网站的摄影作品画廊展示。 - 资讯类网站的图文卡片信息流排版。 - 电商平台的商品列表页，适配不同尺寸的商品主图。 ## 常见问题 ### CSS Columns 和 Flexbox 引擎有什么区别？ CSS Columns 更接近经典的瀑布流效果，元素按列从上到下排列；Flexbox 则是按行折行排列，更容易控制单行元素的宽度一致性。 ### 响应式断点应该如何填写？ 每行填写一条规则，格式为“屏幕宽度:列数”，例如“640:2”表示屏幕宽度小于 640px 时显示 2 列。 ### 什么是“跳过元素”？ 跳过元素是指在瀑布流中需要打破常规列宽、占据全宽展示的特殊元素（如横幅广告或精选文章），填入对应的 CSS 选择器即可。 ### 生成的代码需要引入额外的 JS 库吗？ 不需要。本工具生成的代码完全基于纯 CSS 实现，无需依赖任何 JavaScript 插件，页面加载更快且性能更佳。 ### 容器宽度支持哪些单位？ 支持所有合法的 CSS 宽度值，包括像素（如 1200px）、百分比（如 100%）或 CSS 函数（如 min(1200px, 100%)）。 ## 相关工具 - [Tailwind 色板同步器](https://elysiatools.com/zh/tools/tailwind-color-palette-sync): 输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。 - [cURL 转 Go (net/http)](https://elysiatools.com/zh/tools/curl-to-go): 将 cURL 命令转换为 Go net/http 代码片段，包含 http.NewRequest、请求头和请求体 - [cURL 转 JavaScript (axios)](https://elysiatools.com/zh/tools/curl-to-js-axios): 将 cURL 命令转换为 JavaScript axios 代码片段，使用配置对象、请求头和数据 - [cURL 转 JavaScript (fetch)](https://elysiatools.com/zh/tools/curl-to-js-fetch): 将 cURL 命令转换为 JavaScript fetch() 代码片段，包含请求头、请求体和方法 - [cURL 转 PHP (cURL)](https://elysiatools.com/zh/tools/curl-to-php): 将 cURL 命令转换为 PHP cURL 代码片段，包含 curl_setopt、请求头和 POST 字段 - [cURL 转 Python (requests)](https://elysiatools.com/zh/tools/curl-to-python): 将 cURL 命令转换为 Python requests 代码片段，包含请求头、数据和请求方法 - [URL缩短器](https://elysiatools.com/zh/tools/url-shortener): 使用真实的URL缩短服务生成短链接（is.gd和v.gd） - [API 契约压力测试器](https://elysiatools.com/zh/tools/api-contract-stress-tester): 根据 OpenAPI 3.x 规范批量生成边界值测试请求，并可选发送到真实后端以发现契约不一致。 ## 示例 - [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式 - [CSS 查看器样本](https://elysiatools.com/zh/samples/css-viewer-samples): 用于浏览器内 CSS 查看器的样本文件 - [Milligram CSS 框架示例](https://elysiatools.com/zh/samples/milligram): Milligram CSS框架示例，包括排版、表单、网格和组件 - [Tailwind CSS 示例](https://elysiatools.com/zh/samples/tailwind-css): Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置 ## 相关内容 - [CSS 编写、布局与层叠工作流](https://elysiatools.com/zh/hubs/css-authoring-layout-and-cascade-workflows): 通过可读格式化、选择器诊断、响应式片段和视觉状态检查来编写与审查 CSS。