Menu

網頁柵格系統研究（4）：技術實現

前三篇文章中，明確了柵格系統的設計細節和適用範圍。這一篇將集中討論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等「高級」功能，這些就不細說了。Blueprint的特點簡單總結如下：

  1. 採用浮動來實現佈局，簡單明了
  2. 950兩側沒有margin, 最後一列的class需要加上last
  3. 採用額外標籤來清除浮動

960.gs的實現

談到960柵格系統，不得不提960.gs. Nathan Smith在這篇文章中，詳細闡述了他的想法和設計思路。這裡有個demo頁面，核心代碼很簡單： 

<style type="text/css">
    .container_12 { margin: 0 auto; width: 960px }
    .grid_4 { float: left; margin: 0 10px }
</style>
<div class="container_12">
    <div class="grid_4"></div>
    <div class="grid_4"></div>
    <div class="grid_4"></div>
    <div class="clear"></div>
</div>

上面就構建了三欄佈局：


YUI的實現

接著來看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三個文件組成： 

reset.css - 樣式重置
fonts.css - 版式字體控制
grids.css - 柵格系統

我們從demo開始：

注意，demo鏈接中的寬度是750的，但我們只要將

中的id改為doc2, 頁面寬度就自動變為950寬了（YUI非常強大^o^）。來看下dom結構：

採用的也是浮動佈局，簡化後的CSS代碼為： 
<style type="text/css">
    .doc2 { margin: auto; width: 73.076em }
    .yui-u { float: left; margin-left: 1.99%; width: 32% }
    div.first { margin-left: 0 }
    #ft { clear: both }
</style>

YUI的特點是：

  1. 依舊是採用浮動佈局，槽（Gutter）寬通過margin-left來控制（Blueprint採用右邊距，960.gs採用均分，這三個框架對槽的處理實在有意思）
  2. 總寬度採用em, 這樣可以用在彈性佈局上
  3. 欄的佈局用的是百分比，採用了流體佈局

YUI的好處是能用來做自適應佈局，在這前面兩個框架裡是沒有的。但普通的定寬佈局，YUI則顯得有點麻煩，比如我們要實現四欄佈局，dom得這樣寫：

先來兩個兩欄佈局，再細分為四欄佈局，清晰度上欠佳。

 

更多柵格實現

柵格化更多是一種佈局思想，實現技術可以千差萬別。比如今年冒出來的偽絕對定位，立刻就可以用來實現柵格系統。明城兄弟就嘗試了一把。

肯定還有非常多的柵格化實現方案，這裡就不一一挖掘了。

雙飛翼柵格系統

挺奇怪這個名字？請先閱讀這篇文章：漸進增強式佈局探討. 簡單說，雙飛翼佈局是一種佈局實現技術，可以利用它來實現一整套柵格系統。

先看test頁面：Grids Layout Test.

具體技術細節在漸進增強式佈局探討一文中已經闡述，這裡不再重複。有幾點需要說明：

  1. 這套柵格系統並不能實現所有佈局。這和YUI Grids類似，只能實現預定的一些佈局。比如三欄佈局，目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四種情況，這是從淘寶的現有頁面中分析總結出來的。對於同一個站點來說，太多不同的三欄比例不是好事（淘寶目前都有點多，以後可能還會進一步統一）。因 此如果採用這套柵格系統的話，需要先分析站點，定義出一套合適的比例。這裡有個所有比例的自動生成工具：grids_css_generator.html.
  2. 關於命名：.grid-c2-s6表示兩欄（c2: column 2）佈局，sub欄的寬度是4列（s4: sub width is 4 * 40 -10）. 而.grid-c2-s6f, 最後的f表示兩欄佈局的第二種情況，即sub和main互換。類似地，.grid-c3-s5e6d表示三欄佈局，其中sub欄的寬度是5, extra欄的寬度是6, 最後的d表示是s5e6三欄佈局中的第四種情況。
  3. 為了方便使用，將最常用的兩欄佈局.grid-c2-s5用.grid-c2直接表示。同樣的，.grid-c3表示.grid-c3-s5e6. 這是淘寶的默認值，其他站點可以根據實際情況修改。
  4. 這套佈局符合漸進增強式工作流程。細心的你可能已經發現，所有兩欄佈局和三欄佈局，HTML中的DOM結構是完全一樣的，只有最外層div的class不同。如果要交換左右欄，只要非常簡單的修改下class就可以。
  5. 實際使用時，兩欄佈局和三欄佈局已經夠用。其實有了兩欄，其它佈局就都可以組合出來。這裡有一個嘗試性頁面：grids_test4_v0.1.html. 組合佈局看起來很強大，但實際使用時會把問題搞複雜，不推薦使用，乾脆忘掉吧。

最後來看下兩個測試頁面：兩欄佈局grid-c2_test.html 和 三欄佈局grid-c3_test.html.

目前除了發現在ie6下有個bug（超大圖片等會撐亂佈局，其實可以用overflow: hidden來解決，但考慮overflow的負面影響，最後還是由佈局內部的模塊來自主控制的好），尚未發現其他問題。

小結

柵格系統更多的是一種佈局思想，在實際使用時，根據具體需求選用合適的技術來實現即可。需要注意的是，對於柵格的技術實現來說，太靈活未必是件好事，適度靈活最難得。怎麼才能適度呢？這需要瘋狂實踐 + 不斷的反思 + 持續的重構 + 悟…

柵格搭好了頁面框架，接下來很重要的一件事情就是往裡面添加內容模塊。讓內容模塊規範化，讓頁面生成工業化，對大型站點來說，這是柵格系統最有商業價值的地方。下一篇也是本系列最後一篇將展示柵格系統中的模塊化應用。