<h2>工具简介</h2>
<p><strong>Grid 布局生成器</strong>是工具派推出的一款 CSS Grid 可视化辅助工具：不用死记硬背 <code>grid-template-columns</code>、<code>grid-column</code> 这些属性，只要在页面上填数字、选单位、调跨度，右侧就能实时看到网格效果，并自动生成可以直接粘贴到项目里的完整 CSS 代码。它既支持<strong>手写行列模板</strong>，也提供「<strong>快速构建行列</strong>」表单帮新手生成模板，还内置<strong>六种常见布局预设</strong>（三等分列、圣杯布局、相册网格、Dashboard Bento、杂志排版、左侧边栏）一键套用，网格项最多可添加 24 个、每个可独立设置起止位置与跨度，全程在浏览器本地运行，打开即用、无需安装。</p>
<h2>功能亮点</h2>
<ul>
<li><strong>六种快速预设</strong>：三等分列、圣杯布局、相册网格、Dashboard Bento、杂志排版、左侧边栏，覆盖从简单分栏到复杂仪表盘的主流网格场景，点击即整套套用（含模板、间距、对齐和网格项）。</li>
<li><strong>快速构建行列</strong>：不懂 <code>repeat()</code> 语法也没关系，填好「列数 / 列单位 / 行数 / 行单位」点「生成模板」，工具自动拼出 <code>repeat(3, 1fr)</code> 这样的模板字符串。</li>
<li><strong>模板可直接手写</strong>：两个模板输入框支持任意合法的 CSS 值，如 <code>200px 1fr 200px</code>、<code>minmax(120px, 1fr)</code>，并带实时校验——模板为空或行列数超过 12 会红字提示。</li>
<li><strong>网格项精细编排</strong>：每个网格项可单独设置列起点、列跨度、行起点、行跨度（1–12），轻松做出跨列大图、跨行侧栏等不规则排版。</li>
<li><strong>实时预览可点选</strong>：右侧预览区即时反映所有改动，点击任意网格项即可选中（蓝色高亮描边），与左侧编辑区联动。</li>
<li><strong>两种复制方式</strong>：「复制 CSS」给出 <code>.container</code> 加每个 <code>.item-N</code> 的完整样式；「复制 CSS+HTML」额外附带对应的 HTML 结构，粘贴即用。</li>
</ul>
<h2>参数说明</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>默认值 / 取值范围</th>
</tr>
</thead>
<tbody><tr>
<td>快速预设</td>
<td>一键套用整套布局方案</td>
<td>三等分列 / 圣杯布局 / 相册网格 / Dashboard Bento / 杂志排版 / 左侧边栏</td>
</tr>
<tr>
<td>列数、行数</td>
<td>快速构建时的轨道数量</td>
<td>1–12，默认 3 列 1 行</td>
</tr>
<tr>
<td>列单位、行单位</td>
<td>快速构建时每条轨道的尺寸单位</td>
<td><code>1fr</code>（默认列单位）、<code>auto</code>（默认行单位）、<code>100px</code>、<code>120px</code>、<code>150px</code>、<code>200px</code>、<code>minmax(120px, 1fr)</code>；选 <code>auto</code> 时生成 <code>auto</code> 而非 <code>repeat()</code></td>
</tr>
<tr>
<td>grid-template-columns / grid-template-rows</td>
<td>列 / 行模板，可手写任意合法 CSS 值</td>
<td>默认 <code>repeat(3, 1fr)</code> / <code>auto</code>；不能为空，轨道数不能超过 12</td>
</tr>
<tr>
<td>justify-items / align-items</td>
<td>网格项在单元格内的水平 / 垂直对齐</td>
<td><code>stretch</code>（默认）/ <code>start</code> / <code>center</code> / <code>end</code></td>
</tr>
<tr>
<td>justify-content / align-content</td>
<td>整个网格在容器内的水平 / 垂直分布</td>
<td><code>start</code>（默认）/ <code>center</code> / <code>end</code> / <code>space-between</code> / <code>space-around</code> / <code>space-evenly</code></td>
</tr>
<tr>
<td>column-gap / row-gap</td>
<td>列间距 / 行间距（px）</td>
<td>默认 12，最小 0，输入框上限 64</td>
</tr>
<tr>
<td>网格项</td>
<td>参与布局的元素列表，可添加（最多 24 个）、删除（至少保留 1 个）、点选</td>
<td>默认 3 项</td>
</tr>
<tr>
<td>列起点 / 列跨度 / 行起点 / 行跨度</td>
<td>当前选中网格项的位置与跨度</td>
<td>1–12，默认均为 1</td>
</tr>
</tbody></table>
<h2>使用步骤</h2>
<ol>
<li><strong>打开工具页面</strong>：左侧为参数调节区（快速预设、快速构建行列、模板与对齐参数、网格项列表），右侧上方为实时预览区、下方为生成的 CSS 代码，无需登录即可使用。</li>
</ol>
<p><img src="article/202607/1783967160208_7771.png" alt="Grid 布局生成器主界面：左侧为快速预设、快速构建行列、行列模板输入框、对齐与间距参数及网格项编辑区；右侧上方为实时预"></p>
<ol start="2">
<li><p><strong>套用预设或从零搭建</strong>：想快速出效果，直接点「快速预设」中的方案——例如「圣杯布局」会自动生成 <code>200px 1fr 200px</code> 的列模板和 Header / Footer 跨三列的网格项；想自己搭，则用「快速构建行列」填好列数、列单位、行数、行单位后点「生成模板」。</p>
</li>
<li><p><strong>微调模板与对齐</strong>：在 <code>grid-template-columns</code> / <code>grid-template-rows</code> 输入框中可直接手写修改模板（如把某列改成固定 <code>200px</code>）；再用 <code>justify-items</code>、<code>align-items</code>、<code>justify-content</code>、<code>align-content</code> 四个下拉调整对齐与分布，用 <code>column-gap</code>、<code>row-gap</code> 设置间距。模板写错时输入框下方会显示红色错误提示。</p>
</li>
<li><p><strong>编排网格项</strong>：在「网格项」区点击某个编号选中它（预览区对应色块同步蓝色高亮），然后在「编辑网格项」卡片中设置它的列起点、列跨度、行起点、行跨度，做出跨列、跨行效果；需要更多元素时点「添加项」（最多 24 个），点编号旁的「×」删除。</p>
</li>
<li><p><strong>复制代码使用</strong>：确认预览效果后，点代码区右上角的「复制 CSS」得到完整样式（含 <code>.container</code> 和每个 <code>.item-N</code> 的 <code>grid-column</code> / <code>grid-row</code> 声明），或点「复制 CSS+HTML」连 HTML 结构一起带走，粘贴到项目里即可生效。</p>
</li>
</ol>
<h2>使用技巧</h2>
<ul>
<li><strong>弹性列用 <code>1fr</code>，自适应内容用 <code>auto</code></strong>：<code>fr</code> 按比例瓜分剩余空间，适合等宽分栏；<code>auto</code> 按内容撑开，适合高度由内容决定的行，这也是行单位的默认值。</li>
<li><strong>做响应式网格选 <code>minmax(120px, 1fr)</code></strong>：单位下拉里自带这个常用值，轨道最小 120px、有富余空间时弹性伸展，配合 <code>repeat()</code> 是响应式卡片区的主流写法。</li>
<li><strong>间距相等时输出自动合并</strong>：<code>column-gap</code> 与 <code>row-gap</code> 相等时，生成的 CSS 会写成 <code>gap: 12px;</code> 简写；不等时写成 <code>gap: 行间距 列间距;</code>，无需手工优化。</li>
<li><strong>跨度从预设里学</strong>：「相册网格」和「Dashboard Bento」预设演示了列跨度、行跨度的典型组合，套用后观察各网格项的参数，比自己摸索更快理解 <code>span</code> 的用法。</li>
<li><strong>手写模板注意 12 条轨道上限</strong>：工具出于预览性能考虑限制行列轨道数不超过 12，超出会提示「行列数不能超过 12」，需要更多轨道时可拆成多个网格容器。</li>
<li><strong>改乱了点「重置」</strong>：左侧面板底部的「重置」按钮会把所有参数和网格项恢复到默认的三等分列状态，随时可以放心试验。</li>
</ul>
<h2>常见问题</h2>
<p><strong>Q1：<code>justify-items</code> 和 <code>justify-content</code> 有什么区别？</strong><br><code>justify-items</code> / <code>align-items</code> 控制<strong>每个网格项在自己单元格内</strong>的对齐（如单元格很宽时项目靠左还是居中）；<code>justify-content</code> / <code>align-content</code> 控制<strong>整个网格在容器内</strong>的分布（如网格总宽小于容器时整体靠左、居中还是两端分散）。前者管「格子里的东西」，后者管「格子整体」。</p>
<p><strong>Q2：生成的 CSS 里 <code>.item-1</code> 的 <code>grid-column: 1 / span 2</code> 是什么意思？</strong><br>表示该项从第 1 条列网格线开始、向后跨 2 列。<code>列起点</code>对应前面的 <code>1</code>，<code>列跨度</code>对应 <code>span 2</code>；行方向同理。想改位置只改起点，想改大小只改跨度。</p>
<p><strong>Q3：为什么「快速构建行列」里行单位选 <code>auto</code> 时，生成的是 <code>auto</code> 而不是 <code>repeat(行数, auto)</code>？</strong><br>这是工具的有意设计：单行 <code>auto</code> 表示行高完全由内容决定，是最常见的默认行为；如果你确实需要多行固定高度，把行单位选成具体的像素值或 <code>1fr</code> 即可生成 <code>repeat()</code> 模板。</p>
<p><strong>Q4：网格项最多能加多少个？可以删光吗？</strong><br>最多 24 个，达到上限后「添加项」按钮会禁用；至少保留 1 个，只剩一项时不会出现删除的「×」。</p>
<p><strong>Q5：复制出来的代码需要额外引入什么吗？</strong><br>不需要。生成的是纯原生 CSS（可选附带 HTML），没有任何框架或依赖，粘贴到任意项目即可生效。</p>


## 工具简介

**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），没有任何框架或依赖，粘贴到任意项目即可生效。


免费在线 CSS Grid 布局生成器：可视化编辑行列模板、间距、对齐与网格项跨度，支持手写模板与快速构建行列，内置圣杯布局、相册网格、Dashboard Bento 等预设，实时预览并一键复制 CSS / CSS+HTML 代码。

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