运行工具
本工具帮助前端开发者快速生成标准的 CSS Grid 布局代码。您只需输入所需的列数、行数以及间距数值，系统即可自动输出包含 display: grid 声明的完整 CSS 代码片段。对于纯数字输入的列或行，工具会自动采用 repeat() 函数语法以简化代码；若输入包含单位的具体值如 200px 1fr，则直接保留原始文本。间距参数默认以像素 px 为单位，未填写的间距项将不会出现在最终代码中，确保生成的样式表简洁无冗余。该工具适用于需要快速搭建网格原型的开发场景，无需手动编写繁琐的模板定义。所有输入均为可选，系统提供合理的默认值，方便您立即查看基础网格结构并进行调整。
使用说明
- 在“列”输入框中输入列数（如 3）或具体的轨道尺寸（如 200px 1fr）。
- 在“行”输入框中输入行数（如 4）或留空使用默认 auto。
- 设置通用“间距”值，或分别指定“列间距”和“行间距”。
- 点击运行按钮，在结果区域查看生成的 CSS 代码。
- 复制生成的代码并粘贴到您的样式表中。
示例
- 输入列数 3，行数 2，间距 10，生成使用 repeat(3, 1fr) 和 repeat(2, auto) 的基础网格代码。
- 输入列值 200px 1fr，行值 auto，列间距 20，生成包含固定与弹性混合轨道的自定义布局代码。
常见问题
如果我不填写行数会怎样？
如果不填写行数，系统将默认使用 auto，这意味着行高将根据内容自动调整。
间距的单位是什么？
工具中填写的数字间距值会自动添加 px 单位。如果需要其他单位，请在列或行的自定义文本中直接写明。
我可以输入复杂的轨道定义吗？
可以。您可以在列或行输入框中直接输入如 1fr 1fr 1fr 或 200px 1fr 这样的字符串，工具会原样保留这些值。
生成的代码可以直接使用吗？
是的，生成的代码是标准的 CSS 语法，您可以直接将其复制到项目的样式文件中。