CSS Grid 生成器

欢迎使用 CSS Grid 生成器 —— 这是一个免费、交互式的可视化构建工具，可以将点击操作转化为简洁、可直接复制的 CSS Grid 代码。无论你是在勾勒圣杯布局的原型、制作照片墙草图，还是学习 grid-template-columns 和 grid-area 的工作原理，此计算器都能为你提供实时预览、单轨道尺寸控制和一键导出功能 —— 无需安装、无需注册、无需后端。

什么是 CSS Grid 生成器？

本工具是一个二维布局游乐场。你可以定义行和列，通过点击单元格放置项目，拖动跨度覆盖多个轨道，并实时查看生成的 CSS 更新。与大多数仅生成 grid-template-columns 的网格生成器不同，本工具支持单个项目放置（grid-row / grid-column）、多单元格跨越、为初学者提供的动画网格线编号，以及六种可立即加载的成熟预设。

本生成器的独特之处

CSS Grid 中的 fr 单位是什么意思？

fr 单位代表网格容器中可用剩余空间的一小部分。在减去固定尺寸（px, em, %）后，剩余空间按 fr 轨道的比例进行分配。例如，1fr 2fr 1fr 会使中间列获得的剩余空间是其他列的两倍。fr 是构建灵活、比例协调布局的最常用方式，可以响应容器大小而无需媒体查询。

CSS Grid 与 Flexbox 有什么区别？

Flexbox 是一维的，沿单个轴（行或列）排列项目。CSS Grid 是二维的，同时控制行和列。Flexbox 适用于导航栏、按钮组或单行卡片。Grid 适用于全页布局、相册、仪表板以及任何需要跨两个轴精确对齐的设计。许多现代 UI 会结合两者 —— 使用 Grid 构建页面骨架，在单个单元格内部使用 Flexbox。

如何让网格项目跨越多个单元格？

使用带有 span 关键字或明确线编号的 grid-column 和 grid-row。例如，grid-column: span 2 使项目宽度为两个列，而 grid-column: 1 / 4 使其从第1线跨越到第4线。grid-row: 2 / span 3 从第2行线开始并跨越三行。在本生成器中，点击任何项目以选中它，然后使用侧边面板中的箭头按钮来扩大或缩小其行/列跨度 —— CSS 会立即更新。

CSS Grid 中的 minmax() 是什么？

minmax(min, max) 定义了轨道尺寸的上下限。它最常与 repeat() 中的 auto-fit 或 auto-fill 配合使用，以在无需媒体查询的情况下构建响应式网格。例如，repeat(auto-fit, minmax(200px, 1fr)) 会创建尽可能多且最小为 200px 的列，并拉伸它们以均分剩余空间 —— 这是响应式卡片布局的经典模式。

如何使用本工具

1. 选择初始预设 —— 点击顶部的六个布局预设之一来加载一个真实的起点，或从头开始构建。
2. 设置行和列 —— 使用行和列计数器添加或删除轨道，并使用 fr, px, %, auto 或 minmax() 编辑每个轨道的大小。
3. 放置并跨越项目 —— 点击任何空白单元格以添加项目，或点击现有项目以选中它并使用箭头按钮更改其行/列跨度。
4. 调整间距和对齐 —— 使用滑块设置行间距和列间距，并从下拉菜单中选择 justify-items 和 align-items。
5. 切换线条叠加 —— 开启网格线编号以确切查看 1, 2, 3 线的位置 —— 非常适合学习放置规则。
6. 复制或下载 —— 在 CSS 和 HTML 选项卡之间切换，然后点击“复制”或“下载”以获取生成的代码。

六种内置预设

实际应用场景

针对前端开发人员

• 在编写组件代码前快速制作页面骨架原型
• 为响应式卡片网格生成 repeat(auto-fit, minmax()) 代码片段
• 在投入结构开发前可视化测试 grid-template-areas
• 同时导出容器 CSS 和匹配的 HTML 结构

针对设计师和学习者

• 通过实时预览确切了解 fr, auto, 和 minmax() 的表现
• 切换网格线编号以理解基于线的放置方式
• 无需编写任何代码即可实验跨度值
• 并排比较预设以学习地道的 Grid 模式

针对教育工作者和博主

• 在研讨会中通过视觉叠加层演示 Grid 概念
• 几秒钟内即可为教程生成整洁的代码示例
• 展示相同的 CSS Grid 结构如何从 4 列扩展到 12 列

编写更简洁 Grid CSS 的技巧

• 优先使用 fr 而非 % —— fr 会考虑间距，而 % 不会，因此基于 % 的网格往往会溢出。
• 对命名区域使用 grid-template-areas —— 比线编号更具可读性，且自备文档属性。
• 结合 minmax() 和 auto-fit 实现无需媒体查询的响应式网格。
• 使用 gap: 1rem 设置显式间距 而不是在项目上设置 margin —— 间距永远不会折叠，也无需清理。
• 组合使用 Grid 和 Flexbox —— Grid 用于页面骨架，Flexbox 用于单元格内部。不要强迫一个工具完成所有工作。

常见问题解答

本生成器支持 grid-template-areas 吗？

圣杯布局预设在导出的 CSS 中使用了 grid-template-areas。对于其他预设，我们使用基于线的放置方式（grid-column / grid-row），因为当你点击并重新排列项目时，这种方式更具灵活性。

我也可以导出 HTML 吗？

可以 —— 切换到导出面板中的 HTML 选项卡，即可复制与生成的 CSS 完全匹配的、可直接使用的 HTML 结构。

生成的 CSS 是否适用于旧版浏览器？

CSS Grid 在所有常青浏览器（Chrome, Edge, Firefox, Safari）中都得到支持，而在 IE11 中仅有部分实现。对于现代浏览器，不需要回退方案。如果必须支持 IE11，请优先使用基于线的放置（不使用 gap, minmax(), repeat(auto-fit)）并进行彻底测试。

工具是否在我的浏览器中存储数据？

一切都在 JavaScript 的客户端运行。没有任何内容被发送到服务器，因此你的布局、项目名称和配置在你的机器上是私密的。

它在移动端能用吗？

可以 —— 在手机上构建器会重排为单列，控件保持可点击，预览在触摸屏上依然支持交互。

其他资源

• CSS Grid 布局 - MDN Web 文档
• CSS Grid 布局模块第2级 - W3C 规范
• CSS Grid 布局 - 维基百科