平面设计中使用栅格化设计是相当重要的，特别是网页和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. 逻辑回归（Logistic Regression）

    转载请注明出自BYRans博客:http://www.cnblogs.com/BYRans/ 本文主要讲解分类问题中的逻辑回归.逻辑回归是一个二分类问题. 二分类问题 二分类问题是指预测的y值只有两个 ...

  2. javaScript的function

    一.函数的声明方式 1.普通的函数声明 function box(num1,num2){ return num1+num2; } 2.使用变量初始化函数 var box=function(num1,n ...

  3. Tensorflow 实现稠密输入数据的逻辑回归二分类

    首先 实现一个尽可能少调用tf.nn模块儿的,自己手写相关的function     import tensorflow as tf import numpy as np import melt_da ...

  4. Oracle 11g RAC停止和启动步骤

    关闭前备份控制文件/参数文件:   sqlplus / as sysdba alter database backup controlfile to '/home/oracle/control.ctl ...

  5. elk平台搭建

    很多时候我们需要对日志做一个集中式的处理,但是通常情况下这些日志都分布到n台机器上面,导致一个结果就是效率比较低,而ELK平台可以帮助我们解决这么一件事情: ELK下载:https://www.ela ...

  6. Semaphore

    信号量玩的也是aqs的state. package com.hust.grid.leesf.semaphore; import java.util.concurrent.Semaphore; clas ...

  7. MVC 好记星不如烂笔头之 ---> 全局异常捕获以及ACTION捕获

    public class BaseController : Controller { /// <summary> /// Called after the action method is ...

  8. js中替换返回json中的空格为&nbsp;

    使用.replace(/\s/g, ' ');来替换空格.在IE中 不起作用,可以指定编码将字体设置为:{font-family: Simsun;}

  9. 常见开发需求之js处理url汉字编码中的乱码

    需求及解决    两个页面传值的需求是很常见的,angular中有很多常见的方法用于传值,而且都不会受到字符编码的影响,而采用传统的url中拼字符串进行传值的操作,如果拼串中涉及到中文字符,我们就要考 ...

  10. RocketMQ与kafka对比（18项差异）-转自阿里中间件

    淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介,可完全水平扩容,为了进一步降低成本,我们认为存储部分可以进一步优化,2011年初,Linkin开源了Kaf ...