CSS 网格生成器
生成 CSS 网格容器声明 — 具有等宽列、等高行和间隙的 display: grid — 从简单的列/行/间隙控制中生成。
输入
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-grid-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"columns": "3",
"rows": "2",
"gap": "16"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-grid-generator` tool (CSS Grid Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-grid-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 网格生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是 CSS 网格?
CSS 网格是为二维设计构建的布局系统 — 同时处理行和列，不同于Flexbox沿单个轴放置项目。将任何元素转变为网格需要一个声明 display: grid; 以及它应有的轨道描述。此工具为最常见的情况生成该声明：均匀划分的网格，具有等宽列和等高行，单元格之间间隙一致。
此工具生成的属性
display: grid;— 将元素转变为网格容器；其直接子元素自动成为网格项。grid-template-columns: repeat(N, 1fr);— 创建N列，每列占可用宽度的相等分数 (1fr)。repeat()是写N次1fr的简写。grid-template-rows: repeat(M, 1fr);— 同样的概念应用于行：M个等高行。gap: Npx;— 行和列之间的间隙，用单一简写替换旧的grid-row-gap/grid-column-gap对。
如何使用此工具
- 拖动列滑块来设置网格应该有多少个等宽列(1–12)。
- 拖动行滑块来设置它应该有多少个等高行(1–12)。
- 拖动间隙滑块来设置网格单元格之间的间隙(像素)。
- 从CSS框复制生成的 CSS，或下载为
.css文件，并应用到您的容器元素 — 例如.grid-container { ...生成的 CSS... }。
当您移动任何滑块时，输出会立即更新 — 没有单独的"生成"步骤。
常见问题
我需要为子元素添加任何内容吗?
不需要。一旦父元素有 display: grid; 和模板轨道，直接子元素就会自动放置，从左到右、从上到下填充单元格。只有在您希望子元素跨越多个单元格 (grid-column: span 2;) 或位于特定位置时，才需要在其上添加额外的 CSS。
1fr 是什么意思?
fr 代表"fraction"(分数) — 网格独有的单位。1fr 表示"在考虑了固定大小轨道和间隙后剩余的任何空间的一份"。由于这里每列都使用 1fr，可用宽度在所有列之间均匀分配，网格会随着容器自动调整大小。
我可以制作不同宽度的列，如 200px 1fr 200px 吗?
此工具专注于等列/等行的情况，这涵盖了大多数网格布局(图像库、卡片网格、仪表板)。对于混合的固定/灵活轨道，用您自己的空格分隔的大小列表(200px 1fr 200px)替换生成的 repeat(N, 1fr) 值 — 声明的其余部分保持不变。
gap 和 margin/padding 有什么区别?
gap 仅在网格单元格之间添加间隙 — 它绝不会像 margin 或 padding 那样在网格容器外边缘周围添加间隙。这使其成为一致内部间隙的更可预测的选择。
所有浏览器都支持 CSS 网格吗?
是的。display: grid 和此工具生成的属性自 2017 年以来在所有主要浏览器中都得到了无前缀支持。
隐私
一切都在您的浏览器中进行。您输入的任何 CSS、值或设置都不会发送到服务器 — 当您调整滑块时，声明会在本地生成和更新。