CSS Grid 与 Flexbox 布局生成器

通过实时预览设计响应式 Grid 和 Flexbox 布局，并获得可复制的 CSS。

将指针移到字段上或选中字段即可查看帮助。按 Escape 关闭。

布局列数预览条目数间距（px）方向分布对齐方式项目换行

输出

使用方法

粘贴内容或查看示例。选择可用选项并运行工具，再复制或下载结果。

Layout

输入内容会发送到服务器吗？

不会。内容在当前浏览器中处理，不会发送到服务器或保存。

使用 CSS Grid 与 Flexbox 布局生成器需要注意什么？

预览使用带编号的区块。生成的 CSS 包含布局规则，请根据页面调整选择器和断点。