CSS Grid 生成器
可视化构建 CSS Grid 布局：grid-template-columns/rows、带校验的命名区域、间距、对齐和每个项目的定位，复制简洁的 CSS。
预设
容器
每行代表网格的一行，名称用空格分隔，空单元格用点（.）表示。每个名称必须构成矩形。
项目 1
在此选择项目，或在预览中点击它。
示例：1 / 3、span 2、2 / -1。区域名称会覆盖网格线定位。
预览
拖动预览右下角可调整容器大小。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}相关工具
查看全部什么是 CSS Grid 生成器？
这是 CSS Grid 布局构建器，你可以输入任意轨道模板（例如 repeat(auto-fill, minmax(120px, 1fr))），绘制命名区域，设置间距和对齐，并按网格线编号、跨度或区域名称放置各个项目。实时预览使用的就是生成的 CSS。
如何使用 CSS Grid 生成器
- 从预设开始（3 列、响应式卡片、圣杯布局、侧边栏、便当格布局），或输入 grid-template-columns 和 grid-template-rows。
- 可选地编写 grid-template-areas：每行一行，名称用空格分隔，空单元格用点表示。
- 设置 row-gap、column-gap、justify-items、align-items 和“项目数量”。
- 选中一个项目，设置 grid-column、grid-row（如 1 / 3、span 2），或选择 grid-area。
- 复制 CSS 代码。
示例
grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2
.container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px 16px;
}
.item-2 {
grid-column: 1 / 3;
grid-row: span 2;
} 何时使用 CSS Grid 生成器
Grid 适合二维布局：页面骨架、仪表盘、图库和卡片网格。对于应按内容确定大小的单行或单列项目，Flexbox 通常更简单（参见 CSS Flexbox 生成器）。
CSS Grid 生成器 的工作原理
模板和定位值会用浏览器自己的 CSS.supports() 检查，所以任何在 CSS 中有效的内容都会被接受，无效的值会被标记。区域文本会被校验：每一行的单元格数必须相同，每个名称必须构成一个矩形。输出包含 display: grid、各模板、每行一个带引号字符串的 grid-template-areas、gap（行列间距相等时写一个值，否则写 row column），以及仅在不是 stretch 时才写入的对齐。项目只有在设置后才会得到 grid-area 或 grid-column/grid-row 规则。
常见用例
- 带页眉、侧边栏、主体和页脚的页面骨架
- 用 auto-fill 和 minmax() 实现响应式卡片图库
- 带跨格方块的便当格风格仪表盘
- 带命名区域的杂志式布局
- 带标签列和输入框列的表单布局
常见问题
为什么提示我的区域不是矩形？
在 grid-template-areas 中，每个名称必须占据一个矩形的单元格块。L 形或被拆在不同位置的名称是无效的 CSS，整个属性都会被忽略。
auto-fill 和 auto-fit 有什么区别？
两者都会创建尽可能多的列。auto-fill 保留空轨道，而 auto-fit 会把它们折叠，使现有项目拉伸以填满该行。
如何让某个项目占满整个宽度？
把 grid-column 设为 1 / -1；-1 指的是最后一条网格线。