CSS Grid 生成
错误: 将结果用于所述范围之外。
修正: 生成等宽列CSS网格，复制代码并按页面需要调整。
归档 · 免费
CSS Grid 生成
根据列数、行数和间距生成网格预览及 CSS 代码。
此工具已归档。使用前请重新核对其方法及注明日期的数据。
01输入数值
在浏览器中运行可在浏览器中离线运行。页面和所需文件加载完成后，处理无需互联网。
02CSS Grid 生成
在浏览器中运行
使用方法
根据列数、行数和间距生成网格预览及 CSS 代码。
在浏览器中运行
数据留在你的设备上
输入仅在本页面处理，不会发送到服务器。
关于此工具
使用工具 ↑根据列数、行数和间距生成网格预览及 CSS 代码。
生成等宽列CSS网格，复制代码并按页面需要调整。
- 输入数值
- 列数
- 行数
- 间距
- 计算方法
根据列数、行数和间距生成网格预览及 CSS 代码。
- 示例场景 · 结果
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
计算方法
- 生成等宽列CSS网格，复制代码并按页面需要调整。
CSS Grid 生成
- 列数
- 3
- 行数
- 2
- 间距
- 16 px
结果
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
常见问题
应如何理解结果？
生成等宽列CSS网格，复制代码并按页面需要调整。
数据会发送到哪里？
计算在你的设备上进行。表单输入不会发送到服务器。
术语与定义
输入数值
- 列数
请输入整数，不可输入小数数量。
最小值: 1 · 最大值: 12
- 行数
请输入整数，不可输入小数数量。
最小值: 1 · 最大值: 12
- 间距
输入此量的数值。 使用字段旁标明的单位。 px
最小值: 0 · 最大值: 100 px
结果
- 结果
生成等宽列CSS网格，复制代码并按页面需要调整。
根据输入值按下方方法计算。
常见错误与修正
限制与基本假设
- 生成等宽列CSS网格，复制代码并按页面需要调整。
- 显示结果可能经过舍入，舍入不会提高测量精度。