Toolit你的日常工具箱

CSS 网格布局生成器

代码与文本本地处理

可视化搭建 CSS Grid 布局，支持模板区域、自定义轨道、间距与对齐控制，一键复制干净的 CSS 和 HTML 代码。

预设

网格设置

3
3

对齐

模板区域

点击预览中的单元格来填涂区域

预览

header
header
header
sidebar
content
content
footer
footer
footer

先从列表中选中一个区域，再在网格单元格上点击或拖拽进行填涂。选中同一区域后再次点击已填涂的单元格即可擦除。

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

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

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

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

它适合所有与布局打交道的人：前端开发者可以快速搭建网格布局原型，设计师能把布局想法转化为真正的 CSS 代码，学习者能理解各项 CSS Grid 属性如何配合，任何想要整洁网格代码却不愿从零手写的人也能直接使用。

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

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

1

选择起点

从五个预设中挑选一个——圣杯布局、侧边栏、仪表盘、画廊或页眉-页脚——也可以直接在默认的 3×3 网格上开始。每个预设都会立即配置好列、行、轨道取值和模板区域。

2

配置网格结构

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

3

填涂模板区域

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

4

调整对齐

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

5

复制代码

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

功能特性

可视化网格画布

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

五种预设布局

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

灵活的轨道取值

每个列和行都接受任意 CSS 值：fr 单位、px、auto、百分比或 minmax()，也可以写成 repeat(3, 1fr) 这样的函数。

独立间距控制

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

命名模板区域

填涂单元格来构建带颜色标记的区域，随后可动态添加或删除。工具会写出规范的 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 也是，所以它们会被省略。把其中任何一项改为不同的值，它就会出现在输出中。

网格的最大尺寸是多少？

你可以构建最大 12 列 × 12 行（144 个单元格）的网格，足以覆盖绝大多数实际布局。

CSS Grid 和 Flexbox 有什么区别？

CSS Grid 是二维系统：你同时控制列和行，非常适合整页布局和命名区域。Flexbox 是一维的，沿单一的行或列排布元素。本工具专注于 Grid；当你只需要在一个轴向上分布元素时，可以选用 Flexbox。

它在手机上能用吗？

能。布局会适配较小的屏幕，画布也支持触控填涂——在手机和平板上轻点并拖拽即可分配区域。

我的数据会被保存吗？

不会。一切都在你的浏览器中运行，任何网格配置或生成的代码都不会发送到服务器。

相关工具