Layoutit Grid · 官方在线版
可视化拖拽生成 CSS Grid 布局代码
它解决什么问题
Layoutit Grid 是 CSS Grid 的可视化编辑器：在网格上直接拖拽划分区域、调整行列尺寸，右侧实时生成 `grid-template-areas` 和 `grid-template-columns` 代码。手写 grid 模板容易算错行列，可视化调完再复制代码能省很多试错。
三个典型使用场景
- 设计一个后台布局（侧边栏 + 顶栏 + 内容区），直接拖动生成代码
- 调一个复杂的 12 栅格页面，实时看每个断点的效果
- 给不熟 Grid 的同事解释 `grid-area` 是怎么对应到模板的
和 ToolHub 本地工具怎么配合
Flexbox Froggy：一维排列用 Flex 更简单，先通过游戏掌握 Flex 再决定要不要上 Grid
同类可替代方案
- LibreSpeed —— 开源无追踪网速测试
- Flexbox Froggy —— 玩游戏学会 Flex 布局（经典教学）
使用时要注意什么
只生成静态模板，不包含响应式断点和内容自适应的处理；生成的代码仍需手工整理才能进项目。
常见问题
Layoutit Grid 是免费的吗？
Layoutit Grid 是开源项目，采用 MIT 许可证，官方在线版可以免费使用，不需要为基本功能付费。ToolHub 只做收录与说明，不代管你的数据，也不提供账号或存储服务。
Layoutit Grid 适合什么场景？
最常见的是这几种：设计一个后台布局（侧边栏 + 顶栏 + 内容区），直接拖动生成代码；调一个复杂的 12 栅格页面，实时看每个断点的效果；给不熟 Grid 的同事解释 `grid-area` 是怎么对应到模板的。判断标准很简单——如果你现在正为了这件事装一个几百 MB 的桌面软件，先用它试一次。
它和 ToolHub 的本地工具有什么区别？
ToolHub 的本地工具把代码放在你的浏览器里执行（WebAssembly 或原生 JS），文件不经过服务器；Layoutit Grid 由项目作者维护，数据在其服务器或你的浏览器中处理，具体取决于项目实现，使用前建议先看对方的数据政策。需要「绝对不上传」时可以改用站内同类工具。
用 Layoutit Grid 有什么限制？
只生成静态模板，不包含响应式断点和内容自适应的处理；生成的代码仍需手工整理才能进项目。
相关阅读
- ToolHub 全部 93 个工具 —— 33 个在浏览器本地执行，数据不上传
- 全部网络类工具 —— 按分类筛选，含本地执行与目录直达
- LibreSpeed —— 同类别另一个选择
项目来源：github.com/Leniolabs/layoutit-grid · License: MIT · 分类：网络
官网地址：https://grid.layoutit.com（新标签页打开 grid.layoutit.com）
说明：本页是 ToolHub 对该开源项目的整理与推荐，工具由项目作者维护，版权与数据归原作者所有。官网无法访问时可能是临时故障或网络限制。
安全、快捷、开源工具及资源
无需安装、无需注册、无需命令行 —— 挑一个工具，填参数，出结果。