CSS Grid 生成器
可视化设置行列、间距与对齐，复制 grid 代码，可视化调参并一键复制 CSS，全程在浏览器本地完成。
预览
生成的 CSS
使用说明
可视化设置列数、列宽、行高、gap 与对齐方式，实时预览 Grid 布局并复制 CSS 代码。纯前端本地生成，无需后端。
- 设置列数与列宽（如 1fr、100px、repeat）。
- 调整行高、gap 与 align / justify 对齐。
- 添加网格项并指定跨行跨列，观察预览变化。
- 复制生成的容器与子项 CSS。
常见问题
- 1fr 与 auto 有什么区别？
- 1fr 按剩余空间比例分配；auto 由内容与最小尺寸决定。
- Grid 和 Flex 该怎么选？
- 二维（行列同时控制）用 Grid，一维排列用 Flex 更简单。
- 是否联网？
- 不需要，纯本地渲染。