html页面栅格系统,超好用的网页栅格化工具： GridGuide

超好用的网页栅格化工具： GridGuide

Sponsor

平面设计中使用栅格化设计是相当重要的，特别是网页和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格式的栅格图像

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

我是游客 -

2017 年 02 月 16 日下午 5:17

列数在设置的时候，代表的含义是什么？留白的倍率，不知道怎么来用

{ 发表评论 }

姓名 (必填)

邮件 (必填)

网站

html页面栅格系统,超好用的网页栅格化工具： GridGuide相关推荐

html页面栅格系统,详解CSS中的栅格系统
说到栅格系统(grid system),你也许见过这样的概念: 像这样,通过固定的格子结构,来进行布局设计.这是一种设计风格,而且一直以来很广泛地应用于网页设计领域.这样的风格清晰.工整,可以让网页具 ...
html页面栅格系统,分享响应式CSS栅格系统
分享响应式CSS栅格系统栅格系统这种东西和许多同类工具/素材一样,"系统"二字让它看起来无比高大上,而实际上大多数的栅格系统只是一系列纵横交错的细线构成.很简单?看起来确实如 ...
python制作网页系统_使用python静态网页生成工具pelican快速在github上部署网站博客...
简介 Pelican用Python编写的静态站点生成器.亮点: 使用reStructuredText或Markdown格式直接用编辑器编写内容简单的CLI工具来(重新)生成站点易于与分布式版本控制 ...
jsp+左间距_交互规范：栅格系统让页面元素间距更统一
栅格系统在页面排版布局.尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律,从而减少了设计决策成本:提高了页面布局的一致性跟复用性.本文主要围绕什么是栅格系统,如何搭建栅格系统,栅格系统的应用 ...
一文带你马上清楚bootstrap的栅格系统
bootstrap的栅格系统我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式.移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例 ...
如何去除BootStrap栅格系统默认的15px的padding
BootStrap的栅格系统对于响应式的网页开发非常方便,在使用栅格系统的时候可以非常方便的时候row和col-*-*来控制布局.但是col-*-*默认会带15像素的左右padding,这个会比较困扰 ...
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
bootstrap的栅格系统和响应式工具
关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下一:meta标签的引用 < ...
Bootstrap3栅格系统布局实例
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先.使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局. 先看一个简单实例,来加深对移动设备优先的理 ...

html页面栅格系统,超好用的网页栅格化工具： GridGuide

html页面栅格系统,超好用的网页栅格化工具： GridGuide相关推荐

最新文章

热门文章