CSS Grid 生成器
可视化设计 CSS Grid 布局——调整列、行和间距，点击单元格创建区域，复制生成的代码
网格预览
1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
生成的 CSS
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}如何使用 CSS Grid 生成器
CSS Grid 是 CSS 中最强大的布局系统。我们的可视化生成器让你通过调整参数和点击单元格来设计复杂的网格布局，然后将生成的代码直接复制到项目中。
1
设置列和行
选择网格需要的列数和行数。使用数字输入框调整网格结构。
2
配置尺寸和间距
使用任意 CSS 单位（fr、px、%、auto 等）定义列宽和行高。设置单元格之间的间距。
3
点击选择区域
点击单个单元格将其标记为命名网格区域。每个选中的单元格都会在生成的 CSS 中成为独立的区域。
4
复制代码
点击"复制代码"按钮获取生成的 CSS。粘贴到样式表中即可开始构建布局。
为什么使用我们的 CSS Grid 生成器
不再手写 Grid 代码。我们的可视化工具让你轻松设计、预览和导出完美的 CSS Grid 布局。
可视化点击操作
实时查看网格效果。点击单元格定义区域，CSS 即时更新——无需猜测。
支持所有 CSS 单位
列、行和间距支持任意有效的 CSS 单位——fr、px、%、em、auto、minmax()、repeat() 等。
网格区域命名
点击单元格创建命名的网格区域。生成器产生清晰的 grid-template-areas 代码，易于阅读和维护。
一键复制
一键复制可直接使用的 CSS 代码。无需格式化——直接粘贴到项目中。
常见问题
CSS Grid 是 CSS 中的二维布局系统，可以同时按行和列排列元素。它是目前最强大的 CSS 布局工具，非常适合复杂的页面结构。
grid-template-areas 让你可以为网格区域命名，然后将元素分配到这些名称。它使布局代码更易读：不需要计算行列号，直接引用如 'header'、'sidebar' 或 'main' 等区域名称。
支持所有有效的 CSS 单位：fr（分数单位）、px、%、em、rem、auto、minmax()、repeat() 等。fr 单位在网格中最常用，因为它按比例分配可用空间。
是的，我们的 CSS Grid 生成器完全免费。无需注册，没有使用限制——设计任意数量的网格布局。