开发者

CSS Grid 生成器

以可视化方式设计 CSS Grid 布局，实时预览并生成可用代码。

预设

模板构建器

列轨道 (3)

行轨道 (3)

间距控制

列间距8px

行间距8px

容器

项目水平对齐

项目垂直对齐

内容水平对齐

内容垂直对齐

网格单元格预览

拖动以合并单元格

1,1

1,2

1,3

2,1

2,2

2,3

3,1

3,2

3,3

预览

宽度600px

高度400px

项目 (3/16)

项目 1

列起始

列跨度

行起始

行跨度

自身水平对齐

自身垂直对齐

区域名称

项目 2

列起始

列跨度

行起始

行跨度

自身水平对齐

自身垂直对齐

区域名称

项目 3

列起始

列跨度

行起始

行跨度

自身水平对齐

自身垂直对齐

区域名称

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
}

关于 CSS Grid 生成器

CSS Grid 生成器是一款免费的可视化工具，用于构建 CSS Grid 布局并实时预览。配置列、行、间距和对齐属性，添加具有自定义位置和跨度的项目，并复制生成的 CSS 代码。

浏览所有开发者工具

如何使用

设置列和行，自定义尺寸，调整间距和对齐。添加带有列/行跨度的网格项目。使用预设布局了解常见模式。复制 CSS 输出在项目中使用。

使用场景

通过可视化实验学习 CSS Grid
原型制作仪表板等页面布局
创建响应式网格布局
设计图库和卡片网格
生成可用于生产环境的 CSS Grid 代码

如何使用 CSS Grid 生成器休息一下，来玩免费浏览器游戏吧

所有帖子

c/tools_css-grid-generator0

查看全部创建帖子