CSS 网格生成器(Grid)

定义列数、行数和间距,即时获得对应的 CSS Grid 代码,并带实时预览。

示例:

工作原理

CSS Grid 允许通过一个属性定义二维网格,而 Flexbox 一次只能处理一个轴。该工具生成大小相等的列和行(1fr)所对应的 grid-template-columns 和 grid-template-rows,一键适用于图片库或仪表盘。

生成代码中的「1fr」是什么意思?

fr(分数)单位将可用空间在列或行之间平均分配;因此 repeat(3, 1fr) 会创建三个宽度相同、共享容器全部空间的列。

我可以让各列的大小不同吗?

可以,该工具生成一个简单的起点,列宽相等;您随后可以手动编辑 grid-template-columns,使用固定值或不同的值,例如 200px 1fr 2fr。

100% 本地处理:代码完全在您的浏览器中通过 WebAssembly 生成。