CSS Grid 布局生成器
可视化配置 Grid 布局的列数、行数、间距与列模板，实时预览网格效果并一键复制 CSS 代码。
免费在线工具
Loading…
使用说明
依次设置以下参数：
- 列数 / 行数：输入 1~12 之间的整数，决定网格的列和行数量。
- 列间距 / 行间距：分别设置 column-gap 与 row-gap 的像素值。
- 列模板：可选择「等宽（1fr each）」使每列平分容器宽度、「自动」让每列宽度由内容决定、「固定（200px）」使每列固定为 200px 宽。
预览区会实时渲染 列数×行数 个编号单元格展示网格排列效果，底部代码框同步生成 .container { display: grid; ... } 代码，点击「复制 CSS」即可复制。
功能介绍
本工具是 CSS Grid 布局的可视化生成器，通过数字输入和下拉选择即可组合出常见的网格布局方案，无需手写 grid-template-columns 等复杂语法。
- 支持 1~12 列、1~12 行的任意网格规格设置。
- column-gap 与 row-gap 可分别独立设置，满足行列间距不同的场景。
- 列模板提供等宽（repeat(n, 1fr)）、自动（repeat(n, auto)）、固定宽度（repeat(n, 200px)）三种预设，覆盖大部分常见需求。
- 预览区按当前设置实时渲染对应数量的编号单元格，直观展示网格排列效果。
使用场景
等宽网格布局
搭建图片墙、产品列表等等宽网格布局
后台表单排版
为后台管理系统的表单区域设计固定宽度的网格排列
间距方案试验
快速试验不同行列间距组合，寻找合适的视觉密度
Grid 语法学习
学习 CSS Grid 的 grid-template-columns、gap 等属性写法
常见问题
列数和行数最大可以设置多少？
输入框限制为 1~12，超出该范围的数值不建议使用；如需更多列行，可在复制生成的 CSS 代码后手动调整 repeat() 中的数字。
「固定」列模板中的 200px 可以修改吗？
当前版本固定为 200px，如需其他固定宽度，可先选择固定模板复制代码，再手动替换代码中的 200px 数值。
grid-template-rows 为什么始终是 repeat(n, 1fr)？
当前版本行模板固定采用等分方式（1fr），只有列模板提供等宽/自动/固定三种选择，如需自定义行高可在复制的代码基础上手动修改。
预览区的单元格数量会不会很多导致卡顿？
最大 12 列 × 12 行共 144 个单元格，属于轻量级 DOM 渲染，现代浏览器不会出现卡顿。