CSS Grid 构建器
设置等宽列、行的数量和它们之间的间距。预览布局后复制 CSS。
CSS Grid 构建器
实时网格预览
修改网格参数以更新预览和 CSS。
使用步骤
如何使用
- 将列数和行数设为 1–12，间距设为 0–64 像素。
- 查看实时网格预览。
- 复制生成的 CSS 到样式表。
常用布局实时预览
修改列数、行数和像素间距时，预览会立即更新。每个行列位置都有一个编号单元格。
范围明确、可复制的 CSS
输出使用等分 minmax(0, 1fr) 列和最小高度 64 px 的行。本工具不编辑命名网格区域、不等宽轨道、断点或单个网格项的位置。
在浏览器中生成
预览和 CSS 在当前页面本地生成，不会发送到服务器。
常见问题
你可能还想知道
可以给每列设置不同宽度吗？
不可以。本构建器为所有列使用相等的分数宽度。如需不同轨道尺寸，请编辑生成的 CSS。
可以为网格区域命名吗？
不可以。本版本只设置均匀网格的行列数和间距。
间距使用什么单位？
间距是 0–64 之间的整数 CSS 像素。