CSS Grid 轨道生成器
CSS Grid 轨道版面向数值化搭建：设定列数、行数、列宽轨道与 gap 间距，输出 grid-template-columns、grid-template-rows 与 gap 的组合声明，帮你把卡片墙、表格化版面用固定轨道快速铺开。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 设定列数与每列轨道宽度
- 填写行数与行高
- 调整行列 gap 间距
- 复制 grid-template 声明
典型场景
产品卡片按固定列宽铺成网格
后台表单多列对齐布局
图文混排锁定等宽栅格
常见问题
和 Flexbox 怎么选？
二维版面用 Grid，单轴排布用 Flex，本页专注二维轨道。
轨道能用 fr 吗？
支持 fr、百分比与固定像素混合定义列宽。
会生成媒体查询吗？
本页只出基础轨道，响应式断点请用流式版本。