栅格化系统

一、什么是栅格？

栅格系统以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。栅格系统有时候也称网络系统。

在网页设计中，如果把页面宽度平均切分成多个网格单元，每个单元之间预留一定的空隙，此时整个页面就如同一个栅格系统。

一个标准的栅格系统包括总宽w，列宽c，槽宽g，外边距几个部分。

在栅格系统中宽度一定的情况下，改变列数N和槽宽g，可以设计出任何一种栅格。

三种常见的960栅格系统：12*（60+20）、16*（40+20）、24*（30+10）

使用栅格系统的页面设计非常有条理，看上去也很舒服，可以让整个网站各个页面的布局保持一直。这能增加页面的相似度，提升用户体验。

重要的是，它给整个网站的页面结构定义了一个标准。

对于视觉设计师来说，不用再为网站的每个页面都想一个宽度或高度了；对于前端开发工程师来说，页面的布局设计将完全是规范和可重用的；对于内容编辑或广告销售来说，所有的广告都是规则的、通用的。这对大型网站的开发和维护来说，能节约不少成本。