栅格化研究总结（二）

　　

在上一篇[url=http://www.husw.net/blog/post/1408/]《栅格化研究总结前析》[/url]中，我们已经做了初步了解，下面我们继续来学习：

一个标准的栅格系统，包括以下部分：

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

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

一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：

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

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

W = C * N

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

950的来历

具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时，栅格如下图：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZQZ1-0.png[/img]

上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边，比如右边：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZQV4-1.png[/img]

无论Margin放在何处（这只影响技术实现，不影响设计），我们真正要关注的是去除Margin之后的部分：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZV941-2.png[/img]

这就是我们要真正关注的950！将W的含义变为去除Margin的总宽度，公式变化为：

W = N * C - g

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

950 = 12 * 80 - 10950 = 16 * 60 - 10950 = 24 * 40 - 10

这就形成了960蛋糕的三种常见切法。

12 x 80

[img]http://www.cssk8.com/uploads/allimg/090510/0QZQ441-3.png[/img]

16 x 60

[img]http://lifesinger..org/blog/wp-content/uploads/2008/10/grid_960_16-thumb.png[/img]

24 x 40

[img]http://www.cssk8.com/uploads/allimg/090510/0QZR247-5.png[/img]

上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。在960 Grid System首页中，展示了12 x 80的应用：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZTJ3-6.png[/img]

我们来看下 研究（1）中开头列举的网站的栅格应用情况。

Yahoo!是很标准的 24 x 40 栅格：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZS346-7.png[/img]

淘宝网目前只有商城上部分使用了栅格系统（大的两栏布局遵守了 24 x 40 的栅格化，主体部分使用的另一套740的栅格划分）：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZSc8-8.png[/img]

网易很不错，采用的是 16 x 60 的栅格系统：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZW606-9.png[/img]

栅格系统的优势

上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少，为什么我们还要努力的让网页栅格化呢？

栅格系统具有以下优势：

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

基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

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

对于大型网站来说，我相信栅格化将是一种潮流和趋势。

下面讨论栅格系统中的黄金分割。

黄金分割

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

x / 1 = (1 - x) / x

化为简单的二次方程：

x^2 + x - 1 = 0

正数解为：

x = (sqrt(5) - 1) / 2 ~= 0.618

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

在平面设计领域，黄金分割点被广泛采用。比如下面这种图：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZV512-10.png[/img]

数一数上面有多少黄金分割？

960栅格，实际宽度是950. 对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15:

[img]http://www.cssk8.com/uploads/allimg/090510/0QZV022-11.png[/img]

但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：

[img]http://www.cssk8.com/uploads/allimg/090510/0QZW2K-12.png[/img]

上面讲的都是宽度方向上的栅格化，下面我们看看高度方向上如何应用。

高度方向上的栅格

还记得研究（1）中那张红红的很刺眼的图吗？注意高度值560也是很神奇的。

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

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

[img]http://www.cssk8.com/uploads/allimg/090510/0QZSa6-13.png[/img]

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

栅格化理解了，来看看如何进行[url=http://www.husw.net/blog/post/1410/]栅栏布局模块化命名[/url]