工具简介
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 |
使用步骤
- 打开工具页面：左侧为参数调节区（快速预设、快速构建行列、模板与对齐参数、网格项列表），右侧上方为实时预览区、下方为生成的 CSS 代码，无需登录即可使用。
套用预设或从零搭建：想快速出效果，直接点「快速预设」中的方案——例如「圣杯布局」会自动生成
200px 1fr 200px的列模板和 Header / Footer 跨三列的网格项；想自己搭，则用「快速构建行列」填好列数、列单位、行数、行单位后点「生成模板」。微调模板与对齐：在
grid-template-columns/grid-template-rows输入框中可直接手写修改模板（如把某列改成固定200px）；再用justify-items、align-items、justify-content、align-content四个下拉调整对齐与分布，用column-gap、row-gap设置间距。模板写错时输入框下方会显示红色错误提示。编排网格项：在「网格项」区点击某个编号选中它（预览区对应色块同步蓝色高亮），然后在「编辑网格项」卡片中设置它的列起点、列跨度、行起点、行跨度，做出跨列、跨行效果；需要更多元素时点「添加项」（最多 24 个），点编号旁的「×」删除。
复制代码使用：确认预览效果后，点代码区右上角的「复制 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），没有任何框架或依赖，粘贴到任意项目即可生效。