总监嘲笑我：栅格系统都不会用？怎么做设计的？
栅格系统的基本类型...
病来如山倒真的是说得一点都没错啊，这两天小编因为办公室的空调搞得得了重感冒，现在吃了药虽说是好了一点，但是在药效作用下，整个人昏昏沉沉的，完全提不起劲，工作效率也低了不少。所以各位美丽的帅气的设计师们，真的要注意身体管理啊。
单栏 Manuscript grid
单栏分布是栅格系统中最基础的一种，总的来说，在页面当中它就像是一个封闭的空间，等着我们把内容填充进去。
认真的你们肯定能发现，这种模式在生活当中运用极广，比如书本、杂志，一般都是单栏的排版。这是因为单栏的排版，有利于放置“连贯性”的文字内容，当然里面也可以设置图片。
kellianderson.com
dba-co.com
多栏 Column grid
与单栏设置不一样，多栏的栅格便于处理多种或是零碎的信息分布。我们可以一栏放文字，另外一栏放图片，剩下的用于处理图片标题。
这种栅格样式可以说是非常灵活的，每一栏既是独立的，又是和其他栏相互影响的，甚至可以通过一些设计元素将它们交叉在一起。
使用多栏栅格的时候，要注意每一栏之间的间距以及页边距之间的关系，否则会让人阅读起来非常难受。虽然没有一个必须遵循的规则，但是一般来说，如果栏间距为x的话，通常页边距都会被设置为2x。
thepostfamily.com
tokyoid.com
单元格 Modular grid
单元格就像是多栏的升级版，增加了“行”的概念，使页面被分割为整齐划一的格子，让段落、图片的设置变成等距等大小，简直就是强迫症的福音啊。
单元格很适合处理表格、数据之类的信息，虽然看上去每个格子是独立的，但是通过一些设计元素或者信息排布，我们可以让每个格子和相邻的朋友都能组成小分队来制造吸睛点，让整个页面有主次关系。
craigandkarl.com
mikemcquade.com
分层 Hierarchical grid
这种栅格方式，既像分栏，但又有单元格，在网页设计中应用得比较广泛，它的布局很大程度上是根据内容而改变的。在分层的栅格里面，栏距表现得相对不明显，阅读顺序趋向于跟随流程线。
当设计元素难以用“常规”栅格类型统一处理的时候，我们可以打破常规，试试用分层栅格来进行设置。这样也能给相对固定、沉闷的爬格子带来一点轻松活泼的感觉。
struckaxiom.com
beseku.com
今天的栅格系统v2.0就说到这了，有什么建议，或者想看什么方面的内容，都可以留言告诉小编，让我们大家一起学习，一起进步！
关注 优秀网页设计
微信扫一扫关注公众号
