[轉載]網頁栅格系統研究（4）：技術實作

前三篇文章中，明确了栅格系統的設計細節和适用範圍。這一篇将集中讨論960栅格系統的技術實作。

以上三欄布局的代碼為：

上面是基本功能，Blueprint還支援<code>append-n, prepend-m, border</code>等“進階”功能，這些就不細說了。Blueprint的特點簡單總結如下：

采用浮動來實作布局，簡單明了

950兩側沒有margin, 最後一列的class需要加上<code>last</code>

采用額外标簽來清除浮動

上面就建構了三欄布局：

有意思的幾點：

margin是均勻放在950兩側的

所有grid除了寬度不同，左右邊距都一緻<code>margin: 0 10px;</code>

代碼簡單清晰，起始和結束列不需要添加額外class

注意，demo連結中的寬度是750的，但我們隻要将<code>&lt;div id="doc"&gt;&lt;/div&gt;</code>中的id改為<code>doc2</code>, 頁面寬度就自動變為950寬了（YUI非常強大^o^）。來看下dom結構：

采用的也是浮動布局，簡化後的CSS代碼為：

YUI的特點是：

依舊是采用浮動布局，槽（Gutter）寬通過<code>margin-left</code>來控制（Blueprint采用右邊距，960.gs采用均分，這三個架構對槽的處理實在有意思）

總寬度采用em, 這樣可以用在彈性布局上

欄的布局用的是百分比，采用了流體布局

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

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

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

關于命名：<code>.grid-c2-s6</code>表示兩欄（<code>c2: column 2</code>）布局，<code>sub</code>欄的寬度是4列（<code>s4: sub width is 4 * 40 -10</code>）. 而<code>.grid-c2-s6f</code>, 最後的<code>f</code>表示兩欄布局的第二種情況，即<code>sub</code>和<code>main</code>互換。類似地，<code>.grid-c3-s5e6d</code>表示三欄布局，其中<code>sub</code>欄的寬度是5, <code>extra</code>欄的寬度是6, 最後的<code>d</code>表示是<code>s5e6</code>三欄布局中的第四種情況。

為了友善使用，将最常用的兩欄布局<code>.grid-c2-s5</code>用<code>.grid-c2</code>直接表示。同樣的，<code>.grid-c3</code>表示<code>.grid-c3-s5e6</code>. 這是淘寶的預設值，其他站點可以根據實際情況修改。

這套布局符合漸進增強式工作流程。細心的你可能已經發現，所有兩欄布局和三欄布局，HTML中的DOM結構是完全一樣的，隻有最外層<code>div</code>的<code>class</code>不同。如果要交換左右欄，隻要非常簡單的修改下<code>class</code>就可以。

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

栅格搭好了頁面架構，接下來很重要的一件事情就是往裡面添加内容子產品。讓内容子產品規範化，讓頁面制作工業化，對大型站點來說，這是栅格系統最有商業價值的地方。下一篇也是本系列最後一篇将展示栅格系統中的子產品化應用。

2009-07-15 更新：栅格的子產品化應用和栅格關系不大，主要是子產品的設計和應用，是以不打算繼續此系列，這篇是最後一篇。