✨ CSS Grid Layout Generator

Build a CSS Grid layout by setting columns, track sizing, gaps and breakpoints, then copy the generated CSS and HTML.

📐 计算公式 / 原理

grid-template-columns: repeat(n, 1fr | <固定宽度> | auto)；gap: <行间距> <列间距>

把列数、列宽方式（固定 / fr / auto）、gap 与断点拼装为 CSS Grid 声明及对应 HTML，实时预览并复制；用于二维布局搭建。

列数

间距（px）

列宽方式

容器宽度（px）

📚 深度解析：Grid 网格布局生成器

生成 3 列自适应网格

输入：列 repeat(3,1fr)、间距 16px。处理：输出 grid 模板。输出：display:grid;… 代码与预览。

1fr 是什么？: 剩余空间的一份，配合 repeat 可自适应列宽。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
生成的代码/图片能直接用吗？: 可直接复制使用，建议粘到项目后在浏览器实测微调；本工具只生成不托管。
会保存或上传我的内容吗？: 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。

⚠️ 使用说明与注意事项