Grid 生成器

可视化 CSS Grid 布局生成

预设

列数

3 列

行数

2 行

间距

实时预览

1
2
3
4
5
6

生成的 CSS

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

.grid-item-1 {
}

.grid-item-2 {
}

.grid-item-3 {
}

.grid-item-4 {
}

.grid-item-5 {
}

.grid-item-6 {
}

关于Grid 生成器

CSS Grid布局生成器可视化生成Grid网格布局CSS代码，拖拽调整行列/间距/区域。复杂二维布局、页面框架、响应式栅格系统必备。

使用方法

  1. 设置网格行列数
  2. 调整行列尺寸和间距
  3. 拖拽分配网格区域
  4. 复制生成的HTML+CSS代码

常见问题

Grid和Flexbox怎么选？
Grid适合二维布局(同时控制行和列)：整体页面框架、复杂表格、棋盘布局。Flexbox适合一维布局(单行或单列)。两者可组合使用。
fr单位是什么？
fr(fraction)表示剩余空间的份数。'1fr 2fr'表示第一列占1份，第二列占2份。比百分比更灵活，自动处理间距。
Grid兼容性怎么样？
现代浏览器完全支持(Chrome 57+/Firefox 52+/Safari 10.1+)。IE10-11部分支持旧语法(-ms-grid)。不支持的浏览器需fallback布局。

相关工具

C

CSS 压缩美化

渐

渐变生成器

阴

阴影生成器

F

Flexbox 生成器

查看全部 CSS 工具