Grid 布局练习场

设置列数、行数与间距，生成对应的 display:grid 布局代码，直接复制即可使用。

Grid 参数等待输入

列数行数间距（px）

行数为 0 时不输出 grid-template-rows。

布局代码

列—

行—

间距—

状态—

设置列数与间距后，点击“生成代码”查看 grid 布局代码。

生成的代码为常见网格示例，可直接复制到样式表。

使用说明

列数使用 repeat(n, 1fr) 生成。
行数为 0 时忽略行模板。
间距对应 gap 属性。
不作任何浏览器兼容性保证。
全部在浏览器本地生成。