CSS Grid布局生成器

在线可视化配置 CSS Grid 网格布局，设置行列数、间距、区域，拖拽预览，自动生成 grid-template 等 CSS 代码。

行数

列数

网格间距 (gap)

行高模板

列宽模板

水平对齐 (justify-content)

垂直对齐 (align-content)

预览画布 (拖动鼠标选择合并区块)

生成的 CSS 代码

工具介绍

CSS Grid 布局生成器是可视化生成 CSS Grid 布局代码的在线工具，支持自定义行数、列数、行列尺寸、间距、对齐方式，还可以通过鼠标拖拽选择并合并单元格区域，自动生成 grid-template-areas 代码。

生成的 CSS Grid 布局核心属性包括：

属性	说明
display: grid	开启网格布局
grid-template-rows / grid-template-columns	定义每行的高度和每列的宽度
gap	网格行与列之间的间距
justify-content / align-content	整个网格在容器内的水平、垂直对齐方式
grid-template-areas	通过命名网格区域来实现合并单元格效果

什么是 fr 单位？

fr 是 CSS Grid 中专门用来分配剩余空间的分数单位，比如 `1fr 2fr` 表示剩余空间分为 3 份，第一列占1份，第二列占 2 份。使用 fr 可以很方便实现弹性布局。

grid-template-areas 有什么用？

grid-template-areas 可以给网格区块命名，之后通过 `grid-area` 让子元素占据多个单元格，方便实现合并单元格的效果，让布局更直观易维护。

为什么我拖拽之后没有生成区域？

请检查是否选中了至少一个单元格，如果要清除选择，点击「清除选择」按钮重新拖拽即可。本工具目前只支持生成单个合并区域，多个区域需要你手动修改输出的代码。

生成的代码可以直接用在项目中吗？

可以直接使用，生成的是标准的 CSS Grid 语法，现代浏览器都支持，如果需要兼容旧浏览器，可以根据实际需求添加前缀或者做降级处理。