UTILS.
100% 浏览器内运行

CSS Grid 生成器

生成可调列数、行数和间距的 CSS 网格布局,并提供实时预览。

关于此工具

设置列数、行数以及间距来构建 CSS 网格并复制代码,全部在浏览器中完成。

常见问题

轨道尺寸是如何设定的?
列和行使用 repeat() 配合 1fr,让它们均匀分配可用空间。
间距控件有什么作用?
它以像素为单位设置每个单元格之间的网格间距,并实时应用到预览中。

更多工具