Grid Guide

Grid Guide官网

Grid Guide（grid.guide）是一款经典的免费在线 Web 栅格生成工具，专为解决网页设计中”选栅格、算列宽”这个繁琐环节而生。使用者只需输入页面最大宽度、列数和留白倍率，工具就会自动列出所有整数像素组合下的最佳栅格方案，并给出每种方案的列宽与水槽宽度，设计师从中挑选一个下载 PNG 参考图导入设计软件即可，再也不用手动来回试算。做网页布局时，也可以把它与站内的 Bento Grid Generator 这类现代网格工具搭配使用，或在 Pixso 中直接启用布局栅格功能。

Grid Guide的主要功能

1. 三步生成栅格方案：只需设置最大宽度（Max Width）、列数（Columns）与留白倍率（Outer Gutter Ratio），实时预览所有可行的栅格组合；
2. 多方案智能推荐：自动计算整数像素下所有列宽与水槽宽度的组合并排展示，避免设计师反复试算；
3. 栅格预览：内置可视化预览区域，直观查看每种方案在页面中的实际比例效果；
4. PNG 参考图下载：选中方案后可下载对应栅格的 PNG 图片，直接置入 Photoshop 等设计软件作为参考层；
5. 方案分享链接：可生成包含当前参数的分享链接，方便收藏或发给同事同步栅格规范；
6. 完全免费使用：无需注册、无使用限制，打开网页即可操作。

如何使用Grid Guide

1. 打开 grid.guide 网站，在顶部输入框填写设计稿的最大宽度，常见如 960、1200、1240 或 1440 像素；
2. 设置需要的栅格列数，例如桌面端常用的 12 列或移动端常用的 4-6 列；
3. 选择两侧留白倍率（Outer Gutter Ratio），可选 0、0.5、1.0、1.5、2.0 等档位；
4. 查看工具自动列出的多组方案，每行显示对应的列宽与水槽宽度，预览后挑选最合适的一组；
5. 点击该方案旁的 PNG 按钮下载栅格参考图，导入设计软件并按数值设置栅格系统；
6. 需要沉淀规范时，复制分享链接保存当前参数，或直接把数值写入团队设计规范文档。

Grid Guide的使用场景

1. 网页与后台界面设计：项目启动阶段确定页面栅格规范，让后续排版有据可依；
2. 响应式设计：分别为桌面端、平板与手机宽度计算栅格，快速搭建多断点布局体系；
3. H5 活动页设计：以 375px 等移动宽度为基准生成栅格，保证页面在不同机型上的对齐效果；
4. 设计规范制定：团队统一栅格参数时，用它快速列出候选方案并确定标准。

Grid Guide的常见问题解答

Grid Guide 是免费的吗？

是的，它是一款完全免费的 Web 小工具，无需注册即可使用，主要价值在于自动化栅格试算过程。

网站打不开怎么办？

该工具上线年代较早，站点托管在 GitHub Pages 上，近年偶有访问异常的情况。若暂时无法访问，可稍后再试，或在 Figma、Pixso、MasterGo 莫高设计 等设计工具中使用内置栅格功能替代。

最大宽度和列数怎么选？

经验上两者最好能整除（避免质数），常见组合如 1100px 配 12 列、1200px 配 8 或 12 列、1440px 配 8/10/12 列，但并无标准答案，按内容需求灵活选择即可。

Grid Guide官网网址

Grid Guide官网入口网址：http://grid.guide/

OpenI AI时代点评

Grid Guide 是栅格工具里的”老前辈”：界面极简、逻辑清晰，把最令人头疼的像素试算交给程序，几秒钟给出全部整数解，这种”算得全、算得准”的思路即便在今天也不过时。它的局限同样明显：界面与交互停留在多年前的水准，机型与场景预设少，且站点稳定性欠佳，随时可能打不开。对习惯传统工作流、需要精确栅格数值的网页设计师来说仍值得一试；对新一点的设计团队，更建议把这类需求交给 Figma、Pixso 等内置栅格系统的现代工具，Grid Guide 更适合作为理解栅格原理的入门教具与应急备用工具。