返回
CSS Grid / Flex 布局生成器
开发工具
正在载入
正在加载工具
正在准备工具，暂时无法估算剩余时间。
本工具的全部运算都发生在你的浏览器中，输入内容不会发送到任何服务器。
关于这个工具
可视化设置 Grid 列宽或 Flex 方向、换行、间距和对齐，实时预览并复制简洁 HTML/CSS。
常见用途
- 为博客卡片和内容列表生成 Grid 网格。
- 尝试 Flex 排列方向、换行和对齐方式。
使用方法
- 1.选择 Grid 或 Flex，设置列宽、间距及项目数量。
- 2.调整换行、方向和对齐，查看实时布局。
- 3.复制生成的 HTML 和 CSS 到自己的页面。
限制与说明
- Grid 最多 8 列、预览最多 30 个项目，间距为 0–64 px。
- 尺寸仅接受受限的 px、rem、%、fr 或 auto/min-content/max-content；Flex basis 不接受 fr。
- 不支持任意 CSS 函数、变量、媒体查询、拖拽排序或响应式断点。
常见问题
可以输入 minmax() 或 CSS 变量吗？
当前只接受明确定义的尺寸语法，避免任意样式影响页面。可以复制代码后在自己的项目中补充复杂规则。
代码包含哪些内容？
生成一个 .layout 容器、带序号的项目和当前选择的布局声明，附少量基础项目样式，方便自行调整。