关于此工具
CSS Grid 生成器是一款免费的浏览器内工具，把三个简单的控件——列数、行数和间距——变成可直接粘贴的 CSS 网格布局。设定数值，看着实时预览重绘，再复制生成的规则即可。
列和行是 1 到 12 的整数（默认为 3 和 2），间距是一个 0 到 40 像素的滑块（默认 10）。两个维度都用 repeat() 和 1fr 单位书写，因此每条轨道都均分可用空间。预览会用带编号的彩色方块填充每个单元格，让你一眼看清轨道结构，输出则是一条纯粹的 .grid 规则，使用 display: grid、grid-template-columns、grid-template-rows 和 gap。一键即可复制到剪贴板。
一切都完全在你的浏览器中运行——不上传、无账户、无跟踪——页面加载后即可离线继续使用。
常见问题
轨道的尺寸是怎么定的？
列和行都用 repeat() 和 1fr 单位书写，因此所有轨道都均分可用空间。
间距控件有什么作用？
它设定每个单元格之间的网格间距，以像素为单位，从 0 到 40，并实时应用到预览和生成的 CSS 上。
各控件允许的范围是多少？
列和行接受 1 到 12 的整数；间距滑块从 0 到 40 像素。超出范围或非数字的输入会被限制，回退到默认值：3 列、2 行、10px 间距。
它输出什么 CSS？
一条 .grid 规则，包含 display: grid、分别用 repeat() 和 1fr 设置的 grid-template-columns 和 grid-template-rows，以及以像素为单位的 gap。“复制”按钮会把这条规则原样放到剪贴板。