CSS Grid 生成器

可视化创建等分轨道的 CSS Grid 布局，支持预设与一键复制。

实时预览

生成的 CSS

使用说明

调整左侧的列数、行数、间距与单位，或选择预设；网格会立即更新。生成的 CSS 使用 repeat() 与 gap，可直接复制到样式表。

常见问题

哪些浏览器支持 CSS Grid？

所有现代浏览器都支持 CSS Grid。如需兼容非常旧的浏览器，可使用特性查询添加降级方案。

可以使用不等宽的列吗？

可以。生成基础布局后，将 grid-template-columns 改成 1fr 2fr 等比例即可。