CSS Grid布局生成器是一款免费在线工具，帮助前端开发者可视化配置CSS Grid属性并实时预览效果。支持容器属性（grid-template-columns、grid-template-rows、gap、justify-items、align-items、justify-content、align-content）和子项属性（grid-column、grid-row、justify-self、align-self）的完整配置，一键生成可复制使用的CSS代码。
grid-template-columns 定义列轨道的大小，常用值如 1fr 1fr 1fr（三列等分）、200px 1fr（固定+自适应）、repeat(3, 1fr)（重复语法）。
grid-template-rows 定义行轨道的大小，语法与 columns 相同，如 auto 1fr auto。
gap 定义网格单元之间的间距，可分别设置 row-gap 和 column-gap。
justify-items 定义单元格内容在水平方向的对齐方式：start、center、end、stretch（默认）。
align-items 定义单元格内容在垂直方向的对齐方式：start、center、end、stretch（默认）。
justify-content 和 align-content 定义当网格容器大于网格内容时的对齐方式。
grid-column 定义子项占据的列范围，如 1 / 3 表示从第1列到第3列。
grid-row 定义子项占据的行范围，语法与 grid-column 相同。
justify-self 和 align-self 单独定义子项在单元格内的对齐方式，优先级高于容器属性。
是的，完全免费。纯前端实现，所有计算都在浏览器本地完成，无需注册登录。
Flexbox 是一维布局系统（行或列），适合组件内部布局；Grid 是二维布局系统（同时控制行和列），适合整体页面布局。两者可以互补使用。
不会。所有操作都在浏览器本地完成，不会上传任何数据到服务器，断网也能正常使用。
支持所有现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。IE11 不支持 Grid。
fr 是 CSS Grid 中的分数单位，表示网格容器中可用空间的一部分。例如 1fr 1fr 1fr 表示三列平分可用空间。
使用 repeat(auto-fit, minmax(250px, 1fr)) 可以实现响应式，列数会根据容器宽度自动调整。
使用 开始 / 结束 的格式，如 1 / 3 表示从第1条线开始到第3条线结束（跨越2列）。也可以使用 span 2 表示跨2列。