干货：网页设计之栅格系统

  01、栅格系统的形成
  栅格系统（Grid system）最早使用在17世纪末的法国印刷业，出版业。
  维基百科对其定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。
  网页栅格系统是有平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
  02、栅格系统的原理
  栅格系统可以按栅格数分为12列，16列，24列等，可以自由设计栅格宽度和栅格与栅格间宽度。如下图所示，记页面或区块宽度为W，A代表一个栅格单元的宽度，a代表一个栅格的宽度，i为栅格与栅格之间的距离，n为正整数，则有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
  03、经典960栅格
  设计师们偏爱用苹果系统做设计，苹果下浏览器的默认宽度为960px, 在 1024 x 768 的分辨率下，我们再打开Firefox，自然状态下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650.有趣的960就这样出现了。960只是个符号，并不是标准数。
  04、使用栅格系统的优势
  对于设计师来说，栅格系统更多的是一种布局思想，可以更有逻辑地进行设计工作。灵活地运用栅格系统，不仅可以让整个网站各个页面的布局保持一致，让网页的信息呈现更加美观易读，让设计稿有更好的结构，更可以通过匹配不同组合，做出很多优秀和独特的排版设计。
  使用网格系统，可以使网页设计给用户正式感和规范感，还具有一种结构分明的设计感，提升用户体验。网格系统不意味着循规蹈矩，一味按照网格线来进行布局。网格系统的意义在于更灵活的帮助设计师有序布局，而不是限制设计师的设计。
  对于前端开发人员来说，栅格系统的使用，给整个网站的页面结构定义了一个标准，大大提高了网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的，可重用的，这对于大型网站的开发和维护来说，能节约不少成本。
  随着响应式设计的流行，栅格系统开始被赋予新的意义，那就是，一种响应式设计的实现方式。响应式的要点是为同一个页面设计多种布局形态，分别适配不同屏幕尺寸的设备。