研究（2）中討論了柵格系統(tǒng)的基礎(chǔ)知識。這一篇將集中探討柵格系統(tǒng)的粒度問題。（注：如非特別指明，柵格系統(tǒng)均指24列960柵格系統(tǒng)）
淘寶的首頁（截圖）目前尚未嚴(yán)格遵守柵格系統(tǒng)，如果重構(gòu)的話，寬度方向可以考慮采用下面的柵格布局（只考慮頁面主體部分，忽略高度的比例）：
（圖1）
紛亂的高度世界
我們來看下圖1左上角。左上角部分目前的寬度為256px, 重構(gòu)的話可以將寬度縮小到230px以符合柵格（不可避免的要調(diào)整內(nèi)容，比如人氣寶貝中將只能放下3張圖片）。來仔細(xì)看下高度方向：
（圖2）
高度方向的布局是：90 : 117 : 100, 第一個間隔是8, 總高度為325. 很明顯，高度方向沒有任何柵格化的跡象。實(shí)際上，
即便是嚴(yán)格遵守柵格系統(tǒng)的Yahoo!首頁，高度方向上也沒有嚴(yán)格柵格化。
這究竟是為何？
一切皆有可能
我們縮小關(guān)注點(diǎn)：
（圖3）
上圖中，圖像的大小是70 x 70, 剛好是24列960柵格系統(tǒng)兩列的寬度。對于右邊的文字，采取了如下樣式：
font-size: 12px; line-height: 150%; /* 12 x 150% = 18px */
中文字體是宋體，line-height的計(jì)算值是18px. 注意圖3中文字部分可視區(qū)域的高度為65, 上下各有4px和1px的間隙。為什么會產(chǎn)生這么奇怪的間隙呢？我們來看下圖：
（圖4）
從上圖中我們可以得知，12px的宋體中文字，實(shí)際高度只有11px. line-height減去11多出來的高度，則“均勻”分布在上下間隙中（如果多出來的高度為偶數(shù)，則上下均分；為奇數(shù)時(shí)，上面比下面多1px）。這樣，對于70px的高度來說，要布局4行文字時(shí)，假設(shè)行高多出來的上半部分為x, 下半部分為y, 在最理想的情況下，應(yīng)該滿足以下公式：
11 * 4 + 4 * x + 3 * y = 70 x = y 或 x = y + 1
不難推出，x最理想的整數(shù)解為4. 從而line-height為 4 + 11 + 3 = 18. 因此：
對于24列960柵格系統(tǒng)來說，如果要在高度方向上實(shí)現(xiàn)柵格，font-size為12px時(shí)，line-height的最佳取值是18px(150%).
追求完美點(diǎn)話，還可以將文字部分margin-top: -1px, 使得65上下的間隙為3和2.
至此，我們可以初步判斷：
高度方向上是有可能嚴(yán)格柵格化的。一切皆有可能！
然而，現(xiàn)實(shí)總那么殘酷
（圖5）
上圖中的標(biāo)題高度為22, 這在24列960柵格系統(tǒng)中是無法對齊的。而且總高度為100, 在24列960柵格系統(tǒng)中也不存在（110才可以）。或許高度方向上我們可以細(xì)化行寬為20, 但依舊沒法解決上面兩個問題（22是明顯不能解決的，而對于100px的高度，也無法通過細(xì)化行寬來解決。可選高度永遠(yuǎn)是10的奇數(shù)倍，如果進(jìn)一步細(xì)化，小于10后，會變得非常繁瑣，沒什么實(shí)際應(yīng)用價(jià)值）
寬度世界里會好些嗎
（圖6）
上面是Yahoo!首頁上的兩個小模塊，我都不想去標(biāo)注模塊里面的布局寬度了（因?yàn)橐稽c(diǎn)都不符合24列960柵格系統(tǒng)）。寬度世界里，和高度世界一樣充滿希望但現(xiàn)實(shí)卻殘酷無比。
銀彈是不存在的
柵格系統(tǒng)是美好的。但如果我們一味地追求將所有設(shè)計(jì)都柵格化（必須承認(rèn)我曾有這個幻想），則立刻會陷入地獄一般的黑暗中。這篇文章中的艱難嘗試（我分析了20多個小模塊），讓我突然醒悟到一個粒度問題：任何設(shè)計(jì)都有適用范圍，超出最佳適用范圍，強(qiáng)行使用只會帶來無盡的煩惱。對于柵格系統(tǒng)（這里指所有柵格系統(tǒng)，包括多種柵格系統(tǒng)混合使用的情景）來說，我覺得以下場景非常適合：
- 頁面的總體寬度布局，比如兩欄、三欄等布局
- 一些固定區(qū)塊的尺寸，比如廣告圖片的尺寸
- 區(qū)塊之間的間距，可以參考柵格系統(tǒng)的槽寬（Gutter）
- 一些可以柵格化的小區(qū)域，比如圖3中的例子，暗合柵格往往能簡化布局上的考慮
除了上面這些應(yīng)用場景，強(qiáng)行使用柵格系統(tǒng)，往往會束手束腳，適得其反。這篇文章的目的，就是嘗試用最啰嗦最費(fèi)神貌似很科學(xué)實(shí)際很無聊的分析來指出柵格系統(tǒng)應(yīng)用時(shí)的粒度問題。在粒度問題上達(dá)成一致后，下一篇中我們將討論柵格系統(tǒng)的技術(shù)實(shí)現(xiàn)，最后一篇則討論柵格系統(tǒng)的壓軸好戲：模塊化開發(fā)。
原文：http://lifesinger.org/blog/?p=446
