http://s12/mw690/001QjZSKzy713H8BcJZ8b&690

提到网页布局，大家公认最为规范的就是栅格系统。栅格系统在页面排版布局、尺寸设定方面给出了直观的参考，让页面设计变得有规律，减少了设计决策成本，提高了页面布局的一致性和复用性，避免设计师与开发者在细节上反复沟通确认，提高了开发效率。

 

1、栅格的基础概念

 a为栏目Clumns，i为水槽Gutters。

http://s14/mw690/001QjZSKzy70xOHZQVD8d&690

如果栏目Clumns宽度为40，水槽Gutters宽度为10，就可以算出页面/区块宽度

http://s11/bmiddle/001QjZSKzy70xQdc8yKba&690

以yahoo做例，页面的宽度是950，栅格与栅格之间的间距是10，雅虎完全按照栅格系统设计

http://s13/mw690/001QjZSKzy70xPZIWrqdc&690

建立好栅格系统后，根据实际内容建立盒子，Box有不同组合方式

http://s9/mw690/001QjZSKzy70yZPUfLG18&690

http://s14/mw690/001QjZSKzy70yZQNLJz5d&690

2、建立栅格系统

第1步：建立栅格系统的原子单位——网格

一个完整的栅格系统是由许多规格一致的小网格组成，栏目(Column)和水槽(Gutter)的宽度是以网格为基础单位来增加或减少。所以栅格化的第一步需要先定义好栅格的原子单位「网格」的大小。

http://s2/mw690/001QjZSKzy7oEIm3y8N71&690

栅格系统的网格大小定义为8最为普适、易用。具体原因有以下几点：

• 可以被8整除

目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，所以8作为最小原子足够普适。

http://s13/mw690/001QjZSKzy7oEBVbqIkbc&690

4是整除率最高的原子，但4作为基本原子单位过小，元素间距增加或减少4px，视觉感受的差异不明显，我们找到合适、满意的间距就需要反复调试，导致决策成本增加。8的整除率其次，以8px作为步进单位的变化，效果差异明显，因此作为栅格系统的原子单位较为合适。

http://s10/mw690/001QjZSKzy7oED484gp29&690

• 符合偶数原则

8符合偶数原则。偶数原则可以在页面缩放中最大程度的避免类似0.5、0.75、1.25等像素出现。

http://s1/mw690/001QjZSKzy7oEBYzBTO20&690

• 前端开源组件库基于8的原子单位来设计

开发工程师使用的前端开发组件库，如Metronic、Antdesign 等也是基于8的原子单位来设计，因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便

2、建立基于原子单位的栅格系统