CSS Grid 生成器
可视化 CSS Grid 布局生成器，支持对齐和自动流向控制。
网格设置
预览
1
2
3
4
5
6
7
8
9
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px 10px;
}
.item {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 8px;
}关于此工具
CSS Grid Generator 是一个直观的可视化工具，帮助开发者快速创建复杂的 CSS 网格布局。您可以通过简单的滑块和输入框调整行数、列数、轨道尺寸以及间距，实时设置对齐方式和自动流向。工具会自动优化 CSS 代码（如使用 repeat 函数），并支持一键复制 CSS 和 HTML 代码，极大提高前端开发效率。
功能特点
- 🎨 可视化编辑：直观调整行数、列数及每个轨道的尺寸
- 📐 对齐控制：轻松设置水平和垂直方向的对齐方式
- 🔄 自动布局：支持 grid-auto-flow 各种模式，包括紧凑布局
- ⚡ 实时预览：即时查看网格布局效果及生成的代码
- 📋 多种代码：一键生成并复制 CSS 代码和 HTML 结构
- 🔢 智能优化：自动使用 repeat() 函数简化生成的 CSS 代码