CSS 网格生成器

直观地定义列、行和间隙，然后复制布局的 CSS 网格模板代码。

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

直观地定义列、行和间隙，然后复制 CSS 网格模板代码。
在您的浏览器中运行
免费使用

使用方法

设置列数和行数。
调整间隙和轨道尺寸。
复制网格 CSS。

How this tool works

设置列数和行数。
调整间隙和轨道尺寸。
复制网格 CSS。

Recommended settings

首先使用默认选项，然后根据需要进行调整

Supported formats

Text / on-page input

File size and limits

在旧手机上，非常复杂的多层预览可能会感觉较慢。

Privacy

颜色和 CSS 生成器完全在您的浏览器中运行。预览和转换永远不会上传您的样式。

Common use cases

每当需要时使用 CSS 网格生成器：直观地定义列、行和间隙，然后复制 CSS 网格模板代码。

Troubleshooting

粘贴后预览看起来有所不同

检查页面上是否存在竞争 CSS（重置、继承颜色）。首先将生成的规则复制到独立的样式表中。

常见问题

这会上传我的 CSS 吗？

不需要。生成器和转换器在您的浏览器中运行并提供实时预览。

我需要一个帐户吗？

不。打开工具，调整控件，然后复制 CSS。