Yahoo! 950
淘寶 950
MySpace 960
新浪 950
網易 960
Live Search 958
搜狐 950
優酷 960
AOL 960
根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px.
這是壹件很有趣的事情，為什麽要選擇這個寬度呢？這個寬度值究竟有什麽魔力？
神奇的960
設計師們對蘋果情有獨衷。在 1024 x 768 的分辨率下，打開Firefox：
自然狀態下，Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.
有趣的960就這樣出現了。是的，可以認為壹切就這麽簡單。柵格系統最早出現在平面設計領域，設計師們愛用蘋果，蘋果下瀏覽器的默認寬度為960px, 於是960就這麽“自然”地出現了。
數字背後的奧妙
上面的“自然”出現，細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960，而不是其它什麽1000之類的整數，自然另有奧妙。
科學界有很多問題都可以歸結到數學問題上，我們也從數學著手：
960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480***26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標記為：
N(960) = N(2^6 * 3 * 5) = 26根據上面的算法，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30根據直覺（嚴格證明也不難，不過還是留給數學系的學生去證明吧），我們得到壹個有趣的結論：
要使得N(width)最大，width的取值有兩個系列：
A系列： …, 320, 720, 1440, …
B系列： …, 480, 960, 1920, …
N越大，可組合的寬度值就越多。對柵格系統來說，這意味著越靈活！
目前絕大多數顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網頁柵格系統中的最佳寬度了。（也許不久的將來，將會流行1440）
對
於結構復雜的網站，不少設計師們喜歡采用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 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10這就形成了960蛋糕的三種常見切法。
12 x 80
16 x 60
24 x 40
上面三種切法，N越大，靈活度越高。可以根據網頁的實際復雜度來選用對應的切法。在960 Grid System首頁中，展示了12 x 80的應用：
我們來看下上篇文章中開頭列舉的網站的柵格應用情況。
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) = 18
560 / 960 ~= 0.583N(560)比較大，同時可以讓高寬比接近黃金分割。針對560, 我們采用 14 x 40 柵格：
這樣，我們就在寬度和高度兩個方向上都實現了柵格化。