🔲 CSS Grid生成器

关于CSS Grid生成器

本工具帮助您可视化构建CSS Grid布局。调整行列数、设置间距，并选择单位（fr、px、%、auto）。预览实时更新，生成的CSS代码可直接粘贴到样式表中。

使用方法

1. 设置列数和行数。
2. 调整列间距和行间距（像素）。
3. 选择列和行的单位及大小。
4. 点击更新预览，然后复制CSS用于项目。

常见问题

"fr"单位是什么意思？ "fr"代表分数单位——按比例分配可用空间。三列各为1fr时占据相等宽度。

每列可以使用不同大小吗？ 本工具使用统一模板。如需混合大小，请编辑生成的CSS指定每轨值，如grid-template-columns: 200px 1fr 2fr;。

支持grid areas吗？ 当前版本不支持。如需命名网格区域，请用grid-template-areas扩展生成的代码。