CSS Grid 生成器
可视化的 CSS Grid 布局生成器，轻松创建复杂的二维网格布局。
常用布局
容器设置
项目设置
在预览区点击项目进行单独设置
预览
1
2
3
4
5
6
CSS 代码
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}关于此工具
这款 CSS Grid 生成器旨在简化复杂的二维网格布局设计。通过直观的界面，您可以轻松定义行与列的轨道尺寸（支持 fr、px、auto 等单位），设置行列间距 (Gap)，以及精细控制容器的对齐方式。更重要的是，它支持对单个网格项目进行微调，设置其跨越的行数与列数 (Span) 及自身对齐属性。内置基础网格、侧边栏、画廊等多种预设，助您快速上手并生成标准的 CSS Grid 代码。
功能特点
- ▦ 轨道定义：灵活添加与删除行/列轨道，支持 fr, px, % 等多种单位
- 📐 间距控制：分别调节行间距 (Row Gap) 与列间距 (Column Gap)
- 🎯 对齐管理：全方位控制容器内容与网格项目的水平/垂直对齐方式
- 🖱️ 项目微调：支持点击选中项目，单独设置其跨行跨列 (Span) 及自身对齐属性
- ⚡ 常用预设：提供侧边栏、页头页脚、画廊等经典 Grid 布局一键应用