如何使用 CSS Grid Generator 生成网格布局代码

了解 CSS Grid Generator 的用途

CSS Grid Generator 用于根据列、行和间距设置生成 CSS Grid 布局代码，适合在编写页面结构时快速得到网格模板。你可以从默认布局开始，也可以输入自定义列轨道和行轨道文本，再根据需要设置整体间距、列间距或行间距。生成结果会声明网格显示方式，并分别包含列模板和行模板声明。

生成 CSS Grid 布局代码的步骤

1. 打开 CSS Grid Generator，找到列、行以及间距相关的输入控件。列和行是可选设置；未填写时，默认使用 3 列、auto 行、整体间距 10、列间距 0 和行间距 0。

2. 设置列。输入数字时，例如 3，工具会把它转换为重复轨道形式，生成类似 repeat(3, 1fr) 的列声明。若需要指定具体轨道，可输入 200px 1fr 或 1fr 1fr 1fr 这样的文本；这类自定义文本会按输入内容保留。列输入会先转换为文本，因此整数列数也可以使用。

3. 设置行。输入数字且不为 auto 时，会生成使用 auto 的重复行轨道，例如输入 2 会得到类似 repeat(2, auto) 的形式。输入 auto 或其他行文本时，会保留相应文本，不要把任意表达式理解为会被额外解析或校验。

4. 设置间距。整体间距和单独的列间距、行间距会以像素值写入 CSS，因此输入 16 会对应 16px。有值的间距会分别生成声明；值为 0 或其他无效值时，对应声明会被省略。若同时填写整体间距和单独间距，请根据结果中分别出现的声明确认最终规则是否符合你的布局意图。

5. 生成代码并复制结果。检查列模板、行模板、display: grid 以及间距声明，然后将代码放入自己的样式文件或样式区域中。

如何检查和理解生成结果

结果本质上是一段 CSS Grid 布局代码，而不是已经完成的页面。列输入为纯数字时，重点查看列声明中的 repeat(数字, 1fr)；行输入为非 auto 的纯数字时，重点查看 repeat(数字, auto)。自定义列或行文本不会被改写成这些重复形式。

间距应按像素理解，因为生成的间距声明使用 px。如果某个间距没有出现在结果中，通常表示该输入被视为无值；这与工具默认的 0 列间距和 0 行间距相符。对于复杂的轨道文本，结果只说明输入文本被保留，不能据此判断工具对其进行了语法验证。

使用示例

你正在制作一个三列两行的卡片区域，希望先得到带 16 像素整体间距的 CSS Grid 基础代码。

在列设置中输入 3，在行设置中输入 2，将整体间距设为 16，然后生成代码并查看列、行与间距声明。

结果应包含 display: grid、列模板声明、行模板声明，并在有值时包含对应的 gap、column-gap 或 row-gap 像素声明。

使用限制

• 只有纯数字列值和符合条件的纯数字行值会转换为重复轨道；其他列、行文本会被保留，不能据此判断复杂表达式已通过语法校验。

常见错误

• 错误：把间距输入当成带单位的 CSS 值，或以为填入 0 后仍会生成声明。纠正：输入数值并按像素理解；需要某项声明时使用有值的间距输入，并检查对应的 px 规则是否出现。

常见问题

可以输入数字来设置列数吗？

可以。列输入为纯数字时会生成 repeat(数字, 1fr)；例如输入 3，会得到类似 repeat(3, 1fr) 的列声明。

数字行数会怎样转换？

可以。行输入为纯数字且不为 auto 时，会生成 repeat(数字, auto)；输入 auto 或其他文本时，则保留相应文本。

间距输入支持哪些 CSS 单位？

间距按像素输出，例如有值的 10 会生成 10px。0 或其他无值输入不会生成相应的整体、列或行间距声明。