网页排版对齐神器 GRAAF

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

Graaf

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

产品特色：

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

直接在页面上显示栅格线

只需要引入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

Taiwan Scenery Gallery

原文地址： shejidaren

关键字：设计师

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！