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

Sponsor

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

感谢阅读，觉得文章不错，请分享本文 (o^∇^o)ﾉ

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。