CSS Grid布局生成器 - 在线栅格代码生成

CSS Grid布局生成器使用教程

本教程将详细介绍如何使用CSS Grid布局生成器创建各种网格布局。无论你是Grid新手还是经验丰富的开发者，都能快速上手。教程从界面介绍开始，逐步讲解参数调整、模板使用和代码导出。

第一步：设置网格尺寸

在控制面板顶部的「网格尺寸」区域，通过滑块设置列数和行数：

• 列数：控制网格的列数，范围1-12，建议根据布局需求选择（如三栏布局用3列，四栏用4列）
• 行数：控制网格的行数，范围1-12，内容区通常需要2-4行，仪表盘可能需要更多行

调整后预览区域会立即更新，显示新的网格结构。每个色块代表一个网格项，颜色不同便于区分。

第二步：设置间距

在「间距设置」区域调整网格项之间的间距：

• 列间距：控制列与列之间的间隙，推荐16-24px，太小会显得拥挤
• 行间距：控制行与行之间的间隙，推荐16-24px，与列间距保持一致更协调
• 统一间距：勾选后列间距和行间距同步变化，快速设置统一的间距值

间距值也可以通过快捷按钮选择8px、16px、24px等常用值，方便快速设置。

第三步：配置列宽和行高模板

在「尺寸模板」区域设置每列的宽度和每行的高度：

• 列宽模板：选择「等分(1fr)」使所有列等宽，或选择「自定义」输入如200px 1fr的模板
• 行高模板：选择「自动(auto)」根据内容自动调整，或输入如100px auto的模板
• 预设列宽：提供200px 1fr、1fr 2fr 1fr、250px 1fr 250px等常用模板

fr单位表示可用空间的一份，px表示固定像素，auto表示根据内容自动调整。推荐使用fr单位，它会自动处理间距分配。

第四步：设置对齐方式

在「对齐方式」区域调整网格项的对齐：

• justify-content：控制所有列在水平方向上的分布（start/center/end/stretch/space-between等）
• align-content：控制所有行在垂直方向上的分布
• justify-items：控制每个网格项在水平方向上的对齐（stretch/start/center/end）
• align-items：控制每个网格项在垂直方向上的对齐

默认使用stretch（拉伸填充），大多数场景下保持默认即可。需要居中对齐时使用center。

第五步：调整网格项跨列/跨行

点击预览区域的彩色色块选中一个网格项，在「选中项属性」区域调整其跨列和跨行：

• 跨列(Col Span)：设置网格项占据的列数，如跨2列则占据两个列宽
• 跨行(Row Span)：设置网格项占据的行数，如跨2行则占据两个行高

选中项的详细信息（编号、当前跨列、当前跨行）会显示在面板中，方便确认。跨列/跨行适合用于突出显示重要内容，如仪表盘中的大面板。

第六步：复制CSS代码

编辑完成后，点击「复制CSS代码」按钮，即可将Grid布局代码粘贴到项目CSS中。代码包含容器的display: grid、grid-template-columns、grid-template-rows、gap等属性，以及每个子项的grid-column和grid-row属性。建议同时在HTML中添加对应的网格项元素。