# Grid 布局生成器使用教程：可视化配置 CSS Grid，一键复制完整代码

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/css-grid-layout-generator-guide

## 工具简介

**Grid 布局生成器**是工具派推出的一款 CSS Grid 可视化辅助工具：不用死记硬背 `grid-template-columns`、`grid-column` 这些属性，只要在页面上填数字、选单位、调跨度，右侧就能实时看到网格效果，并自动生成可以直接粘贴到项目里的完整 CSS 代码。它既支持**手写行列模板**，也提供「**快速构建行列**」表单帮新手生成模板，还内置**六种常见布局预设**（三等分列、圣杯布局、相册网格、Dashboard Bento、杂志排版、左侧边栏）一键套用，网格项最多可添加 24 个、每个可独立设置起止位置与跨度，全程在浏览器本地运行，打开即用、无需安装。

## 功能亮点

- **六种快速预设**：三等分列、圣杯布局、相册网格、Dashboard Bento、杂志排版、左侧边栏，覆盖从简单分栏到复杂仪表盘的主流网格场景，点击即整套套用（含模板、间距、对齐和网格项）。
- **快速构建行列**：不懂 `repeat()` 语法也没关系，填好「列数 / 列单位 / 行数 / 行单位」点「生成模板」，工具自动拼出 `repeat(3, 1fr)` 这样的模板字符串。
- **模板可直接手写**：两个模板输入框支持任意合法的 CSS 值，如 `200px 1fr 200px`、`minmax(120px, 1fr)`，并带实时校验——模板为空或行列数超过 12 会红字提示。
- **网格项精细编排**：每个网格项可单独设置列起点、列跨度、行起点、行跨度（1–12），轻松做出跨列大图、跨行侧栏等不规则排版。
- **实时预览可点选**：右侧预览区即时反映所有改动，点击任意网格项即可选中（蓝色高亮描边），与左侧编辑区联动。
- **两种复制方式**：「复制 CSS」给出 `.container` 加每个 `.item-N` 的完整样式；「复制 CSS+HTML」额外附带对应的 HTML 结构，粘贴即用。

## 参数说明

| 参数 | 说明 | 默认值 / 取值范围 |
| --- | --- | --- |
| 快速预设 | 一键套用整套布局方案 | 三等分列 / 圣杯布局 / 相册网格 / Dashboard Bento / 杂志排版 / 左侧边栏 |
| 列数、行数 | 快速构建时的轨道数量 | 1–12，默认 3 列 1 行 |
| 列单位、行单位 | 快速构建时每条轨道的尺寸单位 | `1fr`（默认列单位）、`auto`（默认行单位）、`100px`、`120px`、`150px`、`200px`、`minmax(120px, 1fr)`；选 `auto` 时生成 `auto` 而非 `repeat()` |
| grid-template-columns / grid-template-rows | 列 / 行模板，可手写任意合法 CSS 值 | 默认 `repeat(3, 1fr)` / `auto`；不能为空，轨道数不能超过 12 |
| justify-items / align-items | 网格项在单元格内的水平 / 垂直对齐 | `stretch`（默认）/ `start` / `center` / `end` |
| justify-content / align-content | 整个网格在容器内的水平 / 垂直分布 | `start`（默认）/ `center` / `end` / `space-between` / `space-around` / `space-evenly` |
| column-gap / row-gap | 列间距 / 行间距（px） | 默认 12，最小 0，输入框上限 64 |
| 网格项 | 参与布局的元素列表，可添加（最多 24 个）、删除（至少保留 1 个）、点选 | 默认 3 项 |
| 列起点 / 列跨度 / 行起点 / 行跨度 | 当前选中网格项的位置与跨度 | 1–12，默认均为 1 |

## 使用步骤

1. **打开工具页面**：左侧为参数调节区（快速预设、快速构建行列、模板与对齐参数、网格项列表），右侧上方为实时预览区、下方为生成的 CSS 代码，无需登录即可使用。

![Grid 布局生成器主界面：左侧为快速预设、快速构建行列、行列模板输入框、对齐与间距参数及网格项编辑区；右侧上方为实时预](article/202607/1783967160208_7771.png)

2. **套用预设或从零搭建**：想快速出效果，直接点「快速预设」中的方案——例如「圣杯布局」会自动生成 `200px 1fr 200px` 的列模板和 Header / Footer 跨三列的网格项；想自己搭，则用「快速构建行列」填好列数、列单位、行数、行单位后点「生成模板」。

3. **微调模板与对齐**：在 `grid-template-columns` / `grid-template-rows` 输入框中可直接手写修改模板（如把某列改成固定 `200px`）；再用 `justify-items`、`align-items`、`justify-content`、`align-content` 四个下拉调整对齐与分布，用 `column-gap`、`row-gap` 设置间距。模板写错时输入框下方会显示红色错误提示。

4. **编排网格项**：在「网格项」区点击某个编号选中它（预览区对应色块同步蓝色高亮），然后在「编辑网格项」卡片中设置它的列起点、列跨度、行起点、行跨度，做出跨列、跨行效果；需要更多元素时点「添加项」（最多 24 个），点编号旁的「×」删除。

5. **复制代码使用**：确认预览效果后，点代码区右上角的「复制 CSS」得到完整样式（含 `.container` 和每个 `.item-N` 的 `grid-column` / `grid-row` 声明），或点「复制 CSS+HTML」连 HTML 结构一起带走，粘贴到项目里即可生效。

## 使用技巧

- **弹性列用 `1fr`，自适应内容用 `auto`**：`fr` 按比例瓜分剩余空间，适合等宽分栏；`auto` 按内容撑开，适合高度由内容决定的行，这也是行单位的默认值。
- **做响应式网格选 `minmax(120px, 1fr)`**：单位下拉里自带这个常用值，轨道最小 120px、有富余空间时弹性伸展，配合 `repeat()` 是响应式卡片区的主流写法。
- **间距相等时输出自动合并**：`column-gap` 与 `row-gap` 相等时，生成的 CSS 会写成 `gap: 12px;` 简写；不等时写成 `gap: 行间距 列间距;`，无需手工优化。
- **跨度从预设里学**：「相册网格」和「Dashboard Bento」预设演示了列跨度、行跨度的典型组合，套用后观察各网格项的参数，比自己摸索更快理解 `span` 的用法。
- **手写模板注意 12 条轨道上限**：工具出于预览性能考虑限制行列轨道数不超过 12，超出会提示「行列数不能超过 12」，需要更多轨道时可拆成多个网格容器。
- **改乱了点「重置」**：左侧面板底部的「重置」按钮会把所有参数和网格项恢复到默认的三等分列状态，随时可以放心试验。

## 常见问题

**Q1：`justify-items` 和 `justify-content` 有什么区别？**
`justify-items` / `align-items` 控制**每个网格项在自己单元格内**的对齐（如单元格很宽时项目靠左还是居中）；`justify-content` / `align-content` 控制**整个网格在容器内**的分布（如网格总宽小于容器时整体靠左、居中还是两端分散）。前者管「格子里的东西」，后者管「格子整体」。

**Q2：生成的 CSS 里 `.item-1` 的 `grid-column: 1 / span 2` 是什么意思？**
表示该项从第 1 条列网格线开始、向后跨 2 列。`列起点`对应前面的 `1`，`列跨度`对应 `span 2`；行方向同理。想改位置只改起点，想改大小只改跨度。

**Q3：为什么「快速构建行列」里行单位选 `auto` 时，生成的是 `auto` 而不是 `repeat(行数, auto)`？**
这是工具的有意设计：单行 `auto` 表示行高完全由内容决定，是最常见的默认行为；如果你确实需要多行固定高度，把行单位选成具体的像素值或 `1fr` 即可生成 `repeat()` 模板。

**Q4：网格项最多能加多少个？可以删光吗？**
最多 24 个，达到上限后「添加项」按钮会禁用；至少保留 1 个，只剩一项时不会出现删除的「×」。

**Q5：复制出来的代码需要额外引入什么吗？**
不需要。生成的是纯原生 CSS（可选附带 HTML），没有任何框架或依赖，粘贴到任意项目即可生效。