爲何網頁設計要使用柵格化

研究網頁柵格系統前，來看一組數據： 
網站 首頁頁面寬度 px 
Yahoo! 950 
淘寶 950 
MySpace 960 
新浪 950 
網易 960 
Live Search 958 
搜狐 950 
優酷 960 
AOL 960 

上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度爲950px/960px. 除了微軟的Live Search, 這些站點有個共同特色：頁面結構較複雜，均可以認爲是門戶型網站。 

再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什麼固定規律，共同的特色是：功能專注，頁面結構相對簡單。 

根據上面的簡單分析能夠認爲：當搭建頁面結構複雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定爲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）首先澄清一個應用場景問題。研究(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 - 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的應用：

咱們來看下 研究(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) = 18
560 / 960 ~= 0.583
N(560)比較大，同時可讓高寬比接近黃金分割。針對560, 咱們採用 14 x 40 柵格：

這樣，咱們就在寬度和高度兩個方向上都實現了柵格化。
淘寶的首頁目前還沒有嚴格遵照柵格系統，若是重構的話，寬度方向能夠考慮採用下面的柵格佈局（只考慮頁面主體部分，忽略高度的比例）：

（圖1） 
紛亂的高度世界咱們來看下圖1左上角。左上角部分目前的寬度爲256px, 重構的話能夠將寬度縮小到230px以符合柵格（不可避免的要調整內容，好比人氣寶貝中將只能放下3張圖片）。來仔細看下高度方向：

（圖2）
高度方向的佈局是：90 : 117 : 100, 第一個間隔是8, 總高度爲325. 很明顯，高度方向沒有任何柵格化的跡象。實際上，即使是嚴格遵照柵格系統的Yahoo!首頁，高度方向上也沒有嚴格柵格化。
這到底是爲什麼？
一切皆有可能咱們縮小關注點：

（圖3）
上圖中，圖像的大小是70 x 70, 恰好是24列960柵格系統兩列的寬度。對於右邊的文字，採起了以下樣式：font-size: 12px;line-height: 150%; /* 12 x 150% = 18px */
中文字體是宋體，line-height的計算值是18px. 注意圖3中文字部分可視區域的高度爲65, 上下各有4px和1px的間隙。爲何會產生這麼奇怪的間隙呢？咱們來看下圖：

（圖4）
從上圖中咱們能夠得知，12px的宋體中文字，實際高度只有11px. line-height減去11多出來的高度，則「均勻」分佈在上下間隙中（若是多出來的高度爲偶數，則上下均分；爲奇數時，上面比下面多1px）。這樣，對於70px的高度來講，要佈局4行文字時，假設行高多出來的上半部分爲x, 下半部分爲y, 在最理想的狀況下，應該知足如下公式：11 * 4 + 4 * x + 3 * y = 70x = y 或 x = y + 1
不難推出，x最理想的整數解爲4. 從而line-height爲 4 + 11 + 3 = 18. 所以：
對於24列960柵格系統來講，若是要在高度方向上實現柵格，font-size爲12px時，line-height的最佳取值是18px(150%).
追求完美點話，還能夠將文字部分margin-top: -1px, 使得65上下的間隙爲3和2.
至此，咱們能夠初步判斷：
高度方向上是有可能嚴格柵格化的。一切皆有可能！
然而，現實總那麼殘酷
（圖5）
上圖中的標題高度爲22, 這在24列960柵格系統中是沒法對齊的。並且總高度爲100, 在24列960柵格系統中也不存在（110才能夠）。或許高度方向上咱們能夠細化行寬爲20, 但依舊無法解決上面兩個問題（22是明顯不能解決的，而對於100px的高度，也沒法經過細化行寬來解決。可選高度永遠是10的奇數倍，若是進一步細化，小於10後，會變得很是繁瑣，沒什麼實際應用價值）寬度世界裏會好些嗎
（圖6）
上面是Yahoo!首頁上的兩個小模塊，我都不想去標註模塊裏面的佈局寬度了（由於一點都不符合24列960柵格系統）。寬度世界裏，和高度世界同樣充滿但願但現實卻殘酷無比。銀彈是不存在的柵格系統是美好的。但若是咱們一味地追求將全部設計都柵格化（必須認可我曾有這個幻想），則馬上會陷入地獄通常的黑暗中。這篇文章中的艱難嘗試（我分析了20多個小模塊），讓我忽然醒悟到一個粒度問題：任何設計都有適用範圍，超出最佳適用範圍，強行使用只會帶來無盡的煩惱。對於柵格系統（這裏指全部柵格系統，包括多種柵格系統混合使用的情景）來講，我以爲如下場景很是適合：

1. 頁面的整體寬度佈局，好比兩欄、三欄等佈局

2. 一些固定區塊的尺寸，好比廣告圖片的尺寸

3. 區塊之間的間距，能夠參考柵格系統的槽寬（Gutter）

4. 一些能夠柵格化的小區域，好比圖3中的例子，暗合柵格每每能簡化佈局上的考慮

除了上面這些應用場景，強行使用柵格系統，每每會束手束腳，拔苗助長。這篇文章的目的，就是嘗試用最囉嗦最費神貌似很科學實際很無聊的分析來指出柵格系統應用時的粒度問題。在粒度問題上達成一致後，下一篇中咱們將討論柵格系統的技術實現，最後一篇則討論柵格系統的壓軸好戲：模塊化開發。
前三篇文章中，明確了柵格系統的設計細節和適用範圍。這一篇將集中討論960柵格系統的技術實現。
Blueprint的實現Blueprint是一個完整的CSS框架，柵格系統是它的一部分功能。咱們來看demo頁面：

以上三欄佈局的代碼爲：<style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none }</style><div class="container"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /></div>
上面是基本功能，Blueprint還支持append-n, prepend-m, border等「高級」功能，這些就不細說了