Developer Layout Utility
CSS Grid Generator
可实时测试 columns、rows、gap、minmax、auto-fit 和对齐选项，并快速生成 CSS Grid 代码的布局生成工具。
Grid 布局生成
通过调整 columns、rows、gap 和 minmax 值快速创建卡片式 Grid 布局。
实时预览
修改设置时可立即查看 Grid 排列、间距、项目高度和对齐效果。
复制 CSS 代码
可复制生成的 grid-template、gap、align-items、justify-items 代码，或保存为 CSS 文件。
Grid 设置
设置 Grid 容器的列数、行数、间距、对齐方式和项目数量。
快速预设
一键应用常用 Grid 布局模式。
选择普通 repeat、响应式 auto-fit 或自定义模板模式。
1
3个
8
1
2个
6
2
6个
24
0px
18px
60px
0px
18px
60px
120px
220px
360px
用于 auto-fit minmax 模式。
80px
120px
220px
0px
24px
60px
0px
20px
40px
用于 custom template 模式。例如：240px 1fr 1fr，minmax(180px, 1fr) 2fr
Live Preview
Mode
repeat
Columns
3
Gap
18px / 18px
生成结果
根据当前 CSS Grid 设置生成的代码。
请调整 Grid 设置后点击生成 CSS 代码按钮。
Grid 使用方式对比
根据布局需求选择 repeat、auto-fit 或 custom template。
repeat columns
重复列
auto-fit minmax
重复列
custom template
重复列
帮助
什么是 CSS Grid Generator？
CSS Grid Generator 是一个开发者工具，可实时实验 Grid 布局，并自动生成 grid-template-columns、gap、minmax 和 auto-fit CSS 代码。
适用于卡片列表、图片画廊、管理后台、工具列表、博客列表以及落地页布局设计。
主要功能
- 基于 repeat 的固定列 Grid 布局生成
- 基于 auto-fit minmax 的响应式 Grid 布局生成
- 自定义 grid-template-columns
- 调整 column gap、row gap 和 item height
- 设置 justify-items 和 align-items
- 调整 container padding 和 item radius
- 实时预览并支持 CSS 代码复制与下载
repeat 和 auto-fit 有什么区别？
repeat(3, 1fr) 始终保持 3 列，而 repeat(auto-fit, minmax(220px, 1fr)) 会根据屏幕宽度自动调整列数。
什么时候使用 auto-fit minmax？
适用于卡片列表、商品列表和图片画廊等需要根据屏幕尺寸自动换行的布局。
什么时候使用 custom template？
适用于 240px 1fr 侧边栏布局或 1fr 2fr 1fr 等不同比例列布局。
gap 和 padding 有什么区别？
gap 表示 Grid 项目之间的间距，padding 表示 Grid 容器内部边距。
生成的 CSS 可以直接使用吗？
生成的是基础 Grid 布局代码。在实际项目中还应结合父容器宽度和响应式断点进行调整。