最近一直在追三生三世十里桃花，因为素素一直不跳诛仙台，所以小编无心编辑，苦守素素诛仙台。
就在昨晚，素素终于跳了诛仙台，变回了青丘女帝白浅。
小编的心愿完成了，就麻利儿回来编辑了。今天我们接着回答【有问必答】里的问题：
对于栅格系统（详见搜索百科），相信大家或多或少都了解，其实这个问题换种问法：设计中如何使用栅格系统？这样问或许能帮你更加理解栅格系统。
栅格系统，无论你使用的是哪种样式的栅格，它都是你的网页设计过程中的骨架，它帮你确定元素要怎么放置，帮你确保不同的元素在页面上堆叠却保持协调，有助于保持页面的组织性。
栅格系统有很多优点：
・1.保持内容的组织性，栅格系统下，元素从左到右，从上到下都清晰明了地排布。
2.提高设计效率，因为规则化的栅格让各种设计元素排布都规则化。
3.让元素与元素之间的间距都一样，使得整个设计更加整洁。
然而，仔细观察现在设计作品会发现，单纯运用栅格系统的作品的寥寥无几。因为，栅格营造出一致协调的观感同时，也给人带来一种“呆板”的感觉。既运用栅格又让作品灵动，有许多讲究。
留白分割页面
大量的留白不仅可以创造出清新的氛围，而且观看者也能看出设计者的用心，留白的栅格系统，让整个页面很干爽、透气。
比如Mamo这个网站，仅仅包含了Logo、标题和图像，但却让人很舒服。
・网站地址：http://mamo.fr/
相同风格的网站还有Salon’s，组织有序，不同尺寸的照片排列在一起也非常有序，简单的留白将小的栅格又重新分割，打破了单调布局的常规。
・网站地址：https://salon.io/
利用黑白灰
相比于五颜六色的背景，黑白灰更易于人接受。这三种色调，无论哪一个可以单独用，当然也可以结合在一起，比如用做区域分割。
网站Etch就是整个选用黑色支配，Lomo风的图像赋予整个页面一种活力。内容之间之间也留有充分的空间，使得整个页面变得井然有序。
・网站地址：http://etchapps.com/
当黑白灰一起用时，它创造出的用户体验是令人惊叹的，设计简洁，可读性非常高。
比如Joint的网站，每个页面都提供了可点击的选择区域来进行导航，仅仅使用了黑白色系，当你选择如何浏览网站时，它会令你想要不断的进行点击。
・网站地址： http://www.jointlondon.com/#!
自定义栅格
整齐分割的网页布局从来都不会过时，但是规整的分割未免过于平淡，所以我们会想要做些改变，使得作品看起来更加灵动。
自定义栅格的方式有很多种，我们可以改变栅格的大小，利用元素不同尺寸的行列间隔，或者直接“打破”栅格，但同时也要控制好栅格尺寸和间距，控制不好的细节，整个设计的平衡感可能会被破坏。
网站Nowy Teatr 就是典型的利用不同尺寸的行列间隔，为页面增加了些许混乱感，但还是保持一种平衡的状态。
・网站地址：http://www.nowyteatr.org/pl
“打破”栅格的网站有很多，Marche Notre Dame这个网站就是其中之一，虽然元素看起来不对称，但是仔细看还是基于栅格化布局做的改变。
・网站地址： http://marchenotredame.com/
加入滚动效果
比起静态的图像，滚动效果会更有趣味性，甚至能够改变栅格系统带来的沉闷。
Ballantyne就是将精美的图片、有趣的图形和酷炫的滚动效果结果在一起，来吸引用户的注意的网站。
这个零售网站打开后你会觉得很普通，然而，每次滚动两张图片后，会出现一组新的图片，滚动会持续在几屏内，让人忍不住去看接下来会出现什么，除此之外，自定义的栅格和足够的留白让页面更富有趣味性。
・网站地址：http://www.ballantyne.it/
比Ballantyne更加激进的是Trippeo这个网站，它用了两种动效方式，在刚打开网站时保持背景不变，中间的数字上下滚动，浏览信息时中间的计费图形位置不变，而背景的所有元素都动，不同元素采用不同视差滚动，技术太高超。
小编这里偷偷说一句，这个网站我也就盯着动效看了一晚上而已[捂脸]。
・网站地址：http://v1.trippeo.com/
大体上来说，栅格系统是帮助信息量大的网站有效组织布局，无论是采用哪种设计技巧，都不能影响网站的可读性，合理设置信息层级，达到一致性的视觉效果才是我们的根本，切勿本末倒置。
辣么，说了这么多，在这个信息庞大是时代，你是如何通过布局防止信息过载的？欢迎在评论区留言、交流~
可能有些小伙伴了之后理解了，但是平时却还是不会用，别担心，戳阅读原文，小编给你准备了26个基于栅格系统的网站，里面不仅有案例还有解析，照葫芦画瓢练习，总会掌握的~
