设计 · 免费

CSS Grid 生成

根据列数、行数和间距生成网格预览及 CSS 代码。

01输入数值

在浏览器中运行

—

在浏览器中运行

根据列数、行数和间距生成网格预览及 CSS 代码。

在浏览器中运行

输入仅在本页面处理，不会发送到服务器。

关于此工具

生成等宽列CSS网格，复制代码并按页面需要调整。

输入数值
列数 · 行数 · 间距
计算 / 生成
根据列数、行数和间距生成网格预览及 CSS 代码。
结果
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

生成等宽列CSS网格，复制代码并按页面需要调整。

示例场景

结果

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

应如何理解结果？

生成等宽列CSS网格，复制代码并按页面需要调整。

数据会发送到哪里？