🟦
免费 CSS Grid 生成器
可视化设计 CSS grid — 轨道、单位和间隙 — 并复制生成的 CSS 和 HTML。
加载后可离线使用
可视化设计 CSS grid：添加列和行，混合 fr/px/auto/min-content 单位，调整间隙，并观看实时预览。复制生产就绪的 CSS 和匹配的 HTML。
预设
列 (3)
行 (2)
实时预览
1
2
3
4
5
6
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 16px;
}html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>🔒 一切都在浏览器中运行 — 不会上传任何内容。
工作原理
可视化设计 CSS 网格：添加最多 8 列和 8 行，将每条轨道设为 fr、px、auto 或 min/max-content，并调整行/列间距。带编号的实时预览即时更新，生成的 grid-template CSS 和对应的 HTML 一键即可复制到剪贴板。
- 1调整网格形状用 + 和 − 添加/删除列和行。
- 2设置轨道每列和每行都有自己的单位（1fr、100px、auto…）。
- 3调整间距行间距和列间距分别有独立的滑块。
- 4复制代码可用于生产环境的 CSS 和对应的 HTML 骨架。
一切都在你的浏览器中运行——不会上传任何内容。