栅格系统的形成

1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。 他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印 刷版面就有 2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也 是栅格系统最早的雏形。

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计 系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简 洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

网页设计中的栅格系统

栅格系统有三个总类，分别是：

1. 初级栅格系统，初级栅格系统中又有三个不同的类别，分别是双列栅格系统、三列栅格系统、四列或五列栅格系统。
2. 无对称栅格系统，在无对称栅格系统中又有三个不同的分支：初级三列栅格系统、三列无对称栅格系统、带侧栏的无对称栅格系统。
3. 多样化栅格系统，包括：嵌入侧栏栅格系统、文字框栅格系统、旋转波浪形栅格系统、倾斜矩形栅格系统。

960的宽度对于信息的阅读比较友善（Joe Clark写了一篇屏幕阅读时有关行长的有趣文章）。种种因素使得Yahoo!最后采用了定宽布局（Tommy Olsson总结了 每种布局设计的优缺点 ）。

这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究）。

几个术语和一个公式
一个标准的栅格系统，包括以下部分：

将Flowing的宽度标记为W，Column的宽度标记为c，Gutter宽度标记为g，Margin的宽度标记为m，Column的个数标记为N，我们可以得到以下公式：

W=c*n+g(n-1)+2m

一遍来说，Gutter是2倍的Magin，上面的公司可以简化为：

W=c*n+g(n-1)+g=(c+g)*N

将c+g标记为C，公式变的非常简单：

W=C*N

上面的公式就是栅格系统的基础，很简单吧。

950的来历

具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 可以集中将Margin集中放在一边，也可以放在两边，但无论放在何处（这只影响技术实现、不影响设计），我们真正要关注的是去掉Margin之后的部分。这就是我们真正要关注的950！将W的宽度变为去掉Margin的总宽度，公式变化为：

W=N*C-g

将上面的公式实例化一下：

950 = 12 * 80 - 10

950 = 16 * 60 - 10

950 = 24 * 40 - 10

上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。

12*80

16*60

24*40

这里提供一个插件工具，安装到Ps、Ai、Fw等可以帮助你的页面自动生成12、16、24Column的栅格系统。http://960.gs

在960 Grid System首页中，展示了12*80的应用。

栅格系统的优势：

提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。 

使网站布局保持一致。这能增加页面的相似度，提升用户体验。 

对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。（详见《超越CSS》一书） 

栅格系统的黄金分割

黄金分割归结为数学问题：对于长度为1的线段，将其分成两部分x和1-x，使得：

x/1=(1-x)/x

化为简单的二次方程：

X2+X-1=0

正数解为：

X=（sqrt(5)-1）/2~=0.618

这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的Google吧）。

对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15. 但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：

高度方向上的栅格

N(560) = N(2^4 * 5 * 7) = 18560 / 960 ~= 0.583

N(560)比较大，同时可以让高宽比接近黄金分割。针对560, 我们采用 14 x 40 栅格：

这样，我们就在宽度和高度两个方向上都实现了栅格化。

延伸阅读：

Grids make eyes happy: how to use Grids by Jason Lynes

栅格愉悦视觉：如何使用栅格

Grids: Order Out of Chaos by About.com

栅格：从混乱到秩序

Cutting and sewing grid-based design: Part 1

裁剪+缝纫----基于栅格的设计 Part1

Grid-based design: Part 2, Designing blog theme templates by Michael Angeles

设计Blog主题模版---基于栅格设计 Part2

五步入门栅格系统设计

Five simple steps to designing grid systems - Preface
Five simple steps to designing grid systems - Part 1
Five simple steps to designing grid systems - Part 2
Five simple steps to designing grid systems - Part 3
Five simple steps to designing grid systems - Part 4
Five simple steps to designing grid systems - Part 5 by Mark Boulton

参考文献

http://www.yeeyan.org/articles/view/snlchina/3570

http://ued.taobao.com/blog/2008/10/grid_system_research_2/