网页排版对齐神器在 WEB 页直接嵌入栅格线

当设计师把网页设计稿交给前端开发人员写代码后，页面往往与原稿有些偏着。前端人员写完页面后，还需要截图叠加到设计稿上，去看看偏差比率，这是很麻烦的事情。为了解决这个问题，建议设计师和前端人员看看今天分享的 graaf 栅格样式工具。

Graaf 可以直接在页面上显示栅格线，而且可以自定义栅格结构，大大减少前端或设计师检测页面的烦恼。

工具名称：graaf
工具地址：http://graaf.space/

1. 直接在WEB页面上显示栅格，方便前端人员实时调整（赞赞赞）
2. 栅格样式支持多个流行布局，如：Bootstrap, BBC News, Dribbble, Github, Medium…
3. 支持定制栅格样式（赞赞赞）

只需要引入CSS 文件就能直接在页面上显示栅格线，这些既方便查看页面错位，又可以实时刷新调整，再也不用一个个截图到设计稿了。

<link rel="stylesheet" href="https://grids.graaf.space/WIDTH/COLUMNS/GUTTER.css">

目前自带了有10多个流行的栅格样式，只需要替换对应样式表名称就行，如下图，如果你需要 Bootstrap 的栅格，就点击 bootstrap.css 就能看到样式表链接，然后直接嵌入网页即可。

如果没有你需要的栅格系统，那么可以简单修改 CSS 链接就可以自定义栅格线了，比如这个链接：

https://grids.graaf.space/793/10/16.css

793/10/16分别是宽度、列数、间隔，你只需要修改对应数值就会即时生效，比如设置为宽度：1200px，列数：3列，间距：30 px，那么链接就这样改动：

https://grids.graaf.space/1200/3/30.css

以上内容就是“网页排版对齐神器在 WEB 页直接嵌入栅格线 – graaf”的全部内容了，喜欢的小伙伴记得点赞收藏，也可以分享给身边感兴趣的朋友。如果你还想了解更多前端设计的相关内容，可以来AdobeEdu设计联盟官方网站获取

网页排版对齐神器在 WEB 页直接嵌入栅格线 – graaf