平面设计中使用栅格化设计是相当重要的，特别是网页和VI设计方面，在设计前都需要来好栅格，但是选择合适栅格和计算无疑是浪费了设计师不少的时间，然而当遇上今天的神器「GridGuide」在线工具，以后再也不怕Web网格布局问题了！

网站名称：GridGuide
工具地址：http://grid.guide/ （已加入至设计导航 -> 设计工具类目下）

使用教程

打网站后，用户可以自由设置最大宽度、列数以及留白边界即可生成栅格方案了。

这里说明下留白边界（Outer Gutter Ratio）是以倍率为单位，分别为0，0.5，1.0，1.5，2.0的倍率。

选择最佳栅格方案

GridGuide 可以很方便计算多1种栅格多种方案的布置。比如我设置了最大宽度：1240，列数：12，此时工具会自动生成5种最佳栅格方案给我们选择。

下图是以手机宽度375 PX来设置，列数是5列，留白边框是1.5倍

有了这个工具，我们在制作 WEB、响应式、H5网页、VI 等平面设计相关的栅格都会更容易，推荐大家收藏。

值得使用的三个理由

【1】使用简单，不需要设计师去算来算去
【2】一次性推荐多种最佳栅格布局，设计师可自由选择最合适的方案
【3】支持下载 PNG格式的栅格图像 www.0539G.com

超好用的网页栅格化工具： GridGuide的更多相关文章

  1. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  2. 巧用网页开发者工具F12 审查、修改元素、去除广告、屏蔽遮罩

    巧用网页开发者工具F12 审查.修改元素.去除广告.屏蔽遮罩 每当打开一个网页的时候,是否为页面有很多广告而烦恼:是否为要操作页面(例如观看超清视频),请先注册登录等等事情而麻烦:是否对网页加锁的视频 ...

  3. node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言      说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...

  4. Brackets 1.8 开源+免费的Web前端网页文本编辑工具

    Brackets 1.8 开源+免费的Web网页文本编辑工具   -------------->> ---------------------- A modern, open source ...

  5. 多功能网页刷新工具,刷pv工具

    多功能网页刷新工具,刷pv工具,在线刷流量,刷PV,刷UV小牛刷新助手功能介绍:1.设置多个刷新网页地址.2.设置刷新时间3.开始工作4.其他操作:老板键:打开时自动刷新:置系统托盘5.可手动输入地址 ...

  6. 网页编程工具：EditPlus

    字体:Consolas EditPlus,很土很简单很强大的网页编程工具 http://www.editplus.com/download.html  下载 http://www.cnblogs.co ...

  7. 【XPath Helper：chrome爬虫网页解析工具 Chrome插件】XPath Helper：chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网

    [XPath Helper:chrome爬虫网页解析工具 Chrome插件]XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插 ...

  8. 网页后门工具laudanum

     网页后门工具laudanum laudanum是Kali Linux预先安装的Web Shell工具.它支持多种Web后台技术,如ASP.ASP.net .JSP.PHP.Coldfusion.它提 ...

  9. 网页截图工具CutyCapt

    网页截图工具CutyCapt   CuteCapt是Kali Linux提供的一款网页截图工具.该工具运行在命令行中,可以将WebKit引擎解析的网页保存为图片.它保存的文件支持矢量图和位图两大类型, ...

随机推荐

  1. UTC与GMT时间

    整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated).UTC与格 ...

  2. python--基础学习（五）参数位置传递、关键字传递、包裹传递及解包裹

    python系列均基于python3.4环境 1.位置传递和关键字传递 代码示例 #位置传递 def fun(a,b,c): print("a: {0}, b: {1}, c: {2}&qu ...

  3. 【Java EE 学习 35 下】【struts2】【struts2文件上传】【struts2自定义拦截器】【struts2手动验证】

    一.struts2文件上传 1.上传文件的时候要求必须使得表单的enctype属性设置为multipart/form-data,把它的method属性设置为post 2.上传单个文件的时候需要在Act ...

  4. Spring Bean后处理器以及容器后处理器【转】

    Bean后处理器:即当spring容器实例化Bean实例之后进行的增强处理. 容器后处理器:对容器本身进行处理,并总是在容器实例化其他任何Bean之前读取配置文件的元数据并可能修改这些数据. 一.Be ...

  5. spring-表达式语言-SpEL【转】

    Spring表达式语言(Spring Expression Language)简称:SpEL 课程概要: Spring表达式语言的入门介绍 Spring表达式语言的操作范围 Spring表达式语言的运 ...

  6. C# MessageBox常用用法

    if(MessageBox.Show("message", "title", MessageBoxButtons.OKCancel,MessageBoxIcon ...

  7. C# 与 C++ 数据类型比较及结构体转换

    引自:http://www.blogjava.net/heting/archive/2010/03/20/315998.html   C++            C# =============== ...

  8. HTML5新增的标签

    结构性元素<header><footer>定义页眉(与<head>不一样)和页脚 <section>定义section<article> 定 ...

  9. ov5640摄像头设备驱动

    http://www.cnblogs.com/firege/p/5806121.html  (驱动大神) http://blog.csdn.net/yanbixing123/article/detai ...

  10. BOM，文档宽高及窗口事件小析

    (一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...