首先澄清一個應用場景問題。研究（1）中指出，對於結構複雜的網站，不少設計師們喜歡採用960固定寬度佈局。但要注意的是，960並不是萬能鑰匙，大部分網站沒有也不需要柵格系統。Amazon採用的是寬度自適應佈局，最大限度的呈現資訊。Google更是簡簡單單，主題部分就一個列表。eBay的頁面非常簡潔，商品頁面寬度自適應，資訊自然流暢，噪音少，購物很踏實。類似的站點還有很多，對於這些站點來說，寬度自適應佈局更受青睞。

有個很有意思的網站是Yahoo!, 看起來是固定寬度佈局，實際上在CSS中只要去掉一行，就能搖身一變自適應寬度了：

#page {width: 70em;}

為什麼Yahoo!最後選擇了定寬佈局呢？這很可能是因為定寬佈局比寬度自適應佈局更容易控制。對於結構複雜的網站來說，可維護性和可擴充套件性非常重要。Yahoo!是以資訊展示為主的門戶型網站，960的寬度對於資訊的閱讀比較友善（Joe Clark寫了一篇螢幕閱讀時有關行長的有趣文章）。種種因素使得Yahoo!最後採用了定寬佈局（Tommy Olsson總結了每種佈局設計的優缺點）。

這裡將只關注定寬佈局，適用的場景是搭建複雜的門戶型網站。對於寬度自適應佈局和相應的柵格系統，暫不討論（根據實現的技術手段不同，寬度自適應佈局又分為流體佈局和彈性佈局。我個人蠻喜歡彈性佈局，以後有時間再研究）。

好了，已經將範圍縮小到定寬佈局的網頁柵格系統，那我們開始吧。

並不遙遠的750

還記得800×600的顯示器不？雖然才時隔幾年，感覺卻好像是上個世紀的事了。Mark Boulton做了最早的探索：

將750分割成均等的6份，這就形成了柵格系統，稍加組合劃分就形成了兩欄佈局和三欄佈局。Mark Boulton還研究了Gutter（垂直欄之間的間隙）對柵格的影響，有興趣的可以閱讀原文，或者跟著我往下看吧，下面將詳細闡述。

幾個術語和一個公式

一個標準的柵格系統，包括以下部分：

將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列時，柵格如下圖：

上圖的處理是左右Margin各為5px. 也可以將Margin集中放在一邊，比如右邊：

無論Margin放在何處（這隻影響技術實現，不影響設計），我們真正要關注的是去除Margin之後的部分：

這就是我們要真正關注的950！將W的含義變為去除Margin的總寬度，公式變化為：

W = N * C - g

將上面的公式例項化一下：

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

這就形成了960蛋糕的三種常見切法。

12 x 80

16 x 60

24 x 40

上面三種切法，N越大，靈活度越高。可以根據網頁的實際複雜度來選用對應的切法。在960 Grid System首頁中，展示了12 x 80的應用：

我們來看下研究（1）中開頭列舉的網站的柵格應用情況。

Yahoo!是很標準的 24 x 40 柵格：

淘寶網目前只有商城上部分使用了柵格系統（大的兩欄佈局遵守了 24 x 40 的柵格化，主體部分使用的另一套740的柵格劃分）：

網易很不錯，採用的是 16 x 60 的柵格系統：

研究（1）中的其它站點都沒有真正嚴格地採用柵格系統。

柵格系統的優勢

上面的“發現”是讓人有點沮喪的。目前嚴格採用柵格系統的站點非常少，為什麼我們還要努力的讓網頁柵格化呢？

柵格系統具有以下優勢：

能大大提高網頁的規範性。在柵格系統下，頁面中所有元件的尺寸都是有規律的。這對於大型網站的開發和維護來說，能節約不少成本。
基於柵格進行設計，可以讓整個網站各個頁面的佈局保持一致。這能增加頁面的相似度，提升使用者體驗。
對於設計師們來說，靈活地運用柵格系統，能做出很多優秀和獨特的設計。（詳見《超越CSS》一書）

對於大型網站來說，我相信柵格化將是一種潮流和趨勢。

下面討論柵格系統中的黃金分割。

黃金分割

黃金分割可以歸結為數學問題：對於長度為1的線段，將其分成兩部分 x 和 1 – x, 使得：

x / 1 = (1 - x) / x

化為簡單的二次方程：

x^2 + x - 1 = 0

正數解為：

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

這就是黃金分割。這個比例不僅僅出現在諸如繪畫、雕塑、音樂、建築等藝術領域，在管理、工程設計等方面也有著不可忽視的作用。（這是個自然界的魔數，類似的還有真空光速、普朗克常數、精細結構等等，感興趣的Google吧）

在平面設計領域，黃金分割點被廣泛採用。比如下面這種圖：

數一數上面有多少黃金分割？

960柵格，實際寬度是950. 對於 24 x 40 的情景，最接近黃金分割的兩欄佈局是 350 : 590, 欄數比例為 9 : 15:

但實際使用時，因為窄欄經常用來做導航或放輔助資訊，並不需要350px這麼寬。因此實際情況下經常被採用的佈局是：

上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應用。

高度方向上的柵格

還記得研究（1）中那張紅紅的很刺眼的圖嗎？注意高度值560也是很神奇的。

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

N(560)比較大，同時可以讓高寬比接近黃金分割。針對560, 我們採用 14 x 40 柵格：

這樣，我們就在寬度和高度兩個方向上都實現了柵格化。

網頁柵格系統：蛋糕的切法