CSS网格布局生成器 - 在线可视化生成代码

什么是 CSS 网格布局生成器？

CSS 网格布局生成器是一款可视化工具，让你无需手写代码即可搭建 CSS Grid 布局。你在交互式网格画布上勾画布局，对应的 CSS 和 HTML 会实时更新，随时可以复制到你的项目中。

列、行、间距、对齐以及命名模板区域，全部集中在一个面板里。从经过验证的预设或默认的 3×3 网格开始，通过点击或拖拽来填涂区域，一边操作一边读到干净、符合标准的代码 — 完全不必死记网格语法。

适合谁使用？

它适合所有与布局打交道的人：

前端开发者，快速搭建网格布局原型
设计师，把布局想法转化为真正的 CSS 代码
学习者，理解各项 CSS Grid 属性如何配合
任何人，想要整洁的网格代码却不愿从零手写

隐私优先设计：生成器完全在你的浏览器中运行。你的网格配置以及生成的代码绝不会上传到服务器。

如何使用 CSS 网格布局生成器

选择起点

从五个预设中挑选一个 — 圣杯、侧边栏、仪表盘、画廊或页眉-页脚 — 或从默认的 3×3 网格开始。每个预设都会立即配置好列、行和模板区域。

配置网格结构

在网格设置中，用 + 和 − 添加或删除列与行（1 到 12）。直接编辑每个轨道取值 — 输入 1fr、200px、auto 或任意有效的 CSS 值 — 并分别设置行间距和列间距。

填涂模板区域

从列表中选中一个区域（或用添加区域新建一个），然后在预览单元格上点击或拖拽来分配它们。选中同一区域后再次点击已填涂的单元格即可擦除。每个区域都有专属颜色，让布局一目了然。

调整对齐

在对齐部分使用 justify-items、align-items、justify-content 和 align-content 微调定位。只有非默认值才会出现在生成的代码中。

复制代码

在 CSS 与 HTML 选项卡之间切换查看生成的输出，然后点击复制，把可见的代码发送到剪贴板。

功能特性

可视化网格画布

交互式预览会准确反映你的列宽、行高和间距。点击并拖拽单元格即可定义命名区域。

五种预设布局

用圣杯、侧边栏、仪表盘、画廊或页眉-页脚快速起步 — 每种都已预配置好轨道和模板区域。

灵活的轨道取值

每个列和行都接受任意 CSS 值：fr 单位、px、auto、百分比或 minmax()。

独立间距控制

以像素为单位分别设置行间距和列间距，画布会随你的更改实时更新。

命名模板区域

填涂单元格来构建带颜色标记的区域，随后可动态添加或删除。工具会写出规范的 grid-template-areas CSS。

完整对齐选项

用按钮组配置全部四项对齐属性；默认值会自动从输出中省略。

干净的 CSS 与 HTML 输出

获得一个开箱即用的 .grid-container 以及与之匹配的区域类，并在 HTML 选项卡上获得对应的 HTML 标记结构。

一键复制

用一个按钮把可见的 CSS 或 HTML 复制到剪贴板，可直接粘贴到你的项目中。

触控填涂

画布在手机和平板上同样可用 — 在触摸屏上轻点并拖拽即可分配区域。

深色模式

颜色、边框和代码块会自动适配，让你在任何光线下都能舒适使用。

常见问题

我可以使用哪些轨道取值？

任意有效的 CSS Grid 轨道值：1fr、200px、auto、50%、min-content、max-content，或者像 minmax(200px, 1fr) 和 repeat(3, 1fr) 这样的函数。轨道字段是自由文本，所以你可以在各列各行之间混用单位。

模板区域是如何工作的？

模板区域为网格区域分配名称。从列表中选中一个区域，然后在画布单元格上点击或拖拽来填涂它们。生成器会写出 grid-template-areas 属性以及每个区域对应的类，让标记和 CSS 一一对应。

我可以让某些单元格不属于任何区域吗？

可以。未填涂的单元格在生成的 grid-template-areas 值中会显示为一个点（.），这正是 CSS Grid 表示空单元格的有效语法。

为什么对齐属性没有出现在 CSS 中？

生成器只输出非默认的对齐值，以保持代码简洁。justify-items: stretch 和 align-items: stretch 是 CSS Grid 的默认值，justify-content: start 和 align-content: start 也是，所以它们会被省略。把其中任何一项改为不同的值，它就会出现在输出中。