[CSS tech.] 960 grid system 簡單介紹

我上次在介紹 blueprint 的時候，有提到這件事情。同時在 DivToDesign 也有不少介紹的文章：

第一篇顧名思義就是簡單介紹 960 CSS Framework 是甚麼、該怎麼用，第二篇則是教你怎麼破除 960 寬度──是的，所謂 960 正是意味著，他的最大寬度永遠固定在 960px，你無法透過任何方式去增減他──的限制。

這也是為什麼我比較推薦 blueprint 而不推 960 的原因之一（其實官方首頁上就有 CSS Generator 可以跳脫 960px 的限制了，要用那個 CSS Generator 來產生 CSS 檔案其實也是可以的）。

但是，畢竟對於網頁設計來說，任何的頁面規劃都是可以打破成規的，不然他也不會教你怎麼解決這種固定式的問題了。其實，介紹 960 grid system 有一個很大的誘因，就是他比較簡單，對於網頁設計來說，沒有 blueprint 那麼難就手。

而且，官方還提供了各種軟體的樣板檔案，包含了 Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Exp. Design. 等等，也提供 sketch sheets 的 PDF 檔，非常方便。

他的用法跟 blueprint 大同小異，同樣是要載入他的預設 CSS 檔案，然後繼續編寫你所要的 grid，令人感到遺憾的是，網路上目前找不到像是 blueprint 那種完整的 CSS cheat sheets 以供參考，變成你必須去挖他的 CSS 才知道他有甚麼東西可以用。

不過不用擔心，看過 DivToDesign 第一篇的人應該已經會用了（揍飛）。我就畫蛇添足一下（以下都以 960.gs 官方預設的 CSS 來做說明）：

官方有 12 以及 16 兩種欄位數目可用，分別命名為 container_12 以及 container_16，每個 grid_X 項目皆有左右兩邊留白各 10px（margin-left: 10px; margin-right: 10px;）。

每個欄位名稱叫做 grid_X，其中 X 為 1~16，分別代表各個欄位。

其中 12 與 16 欄位的特定 grid 寬度不同，以下依前 12 後 16 表示：

grid_3(12), grid_4(16) 寬度固定為：220px

grid_6(12), grid_8(16) 寬度固定為：460px

grid_9(12), grid_12(16) 寬度固定為：700px

grid_12(12), grid_16(16) 寬度固定為：960px
在 container_12 的設定下，上述其他欄位的 grid 寬度固定以 80px 的寬度累加。

grid_1 為 60px

grid_2 為 140px

grid_3 為 140+80=220px（請比對上述數值）

依此類推，直到 grid_12 結束。
在 container_16 的設定下，上述其他欄位的 grid 寬度固定以 60px 的寬度累加。

grid_1 為 40px

grid_2 為 100px

grid_3 為 160px

grid_4 為 220px（請比對上述數值）

依此類推，直到 grid_16 結束。
提供了 alpha 與 omega 兩個 class 設定，前者可清除左邊留白（margin-left），後者清除右邊。
提供了 prefix_X 與 suffix_X 的設定，主要是左右內留白（padding-left, padding-right）

其中 12 與 16 欄位的特定 prefix/suffix 寬度不同，以下依前 12 後 16 表示：

prefix_3/suffix_3(12), prefix_4/suffix_4(16) 寬度固定為：240px

prefix_6/suffix_6(12), prefix_8/suffix_8(16) 寬度固定為：480px

prefix_9/suffix_9(12), prefix_12/suffix_12(16) 寬度固定為：720px
其他的 prefix 與 suffix 依照上述（第 3、4 點）寬度累加。
跟 Blueprint 一樣，提供了 pull 與 push 的設定，其中特定的欄位一樣有特定的寬度設定：

pull_3/push_3(12), pull_4/push_4(16) 寬度固定為：-240px/240px

pull_6/push_6(12), pull_8/push_8(16) 寬度固定為：-480px/480px

pull_9/push_9(12), pull_12/push_12(16) 寬度固定為：-720px/720px
最後提供一組 .clear 來清除 grid/prefix/suffix/pull/push 的浮動設定。

最後，請打開他所提供的 Template 檔案，利用你所熟悉的軟體，像是 Firework 或是 Photoshop，將你的 Layout 依照他的 Grid 切好，只要會數 1,2,3,4，我想應該就會寫 HTML Code 了（無責）。

基本上，他在 HTML Code 上的編寫方式，跟我之前所介紹過的 Blueprint 是一模一樣的，唯一的差別在於，他不像是 Blueprint 可以重新產生出全新的不同尺寸的 Grid System，不會發生同一個 Grid System 尺寸卻不一樣的情況。如果是團體作業來說，比較可以避免其他同事把 Grid 混淆。

其實我還是要說一句，如果要切非常複雜的 Layout，請一定要先搞清楚 CSS 的定位關係，才不會 pull & push 傻傻分不清楚。對於不想玩弄 CSS 或是不想被 CSS 玩弄的網頁設計師來說，960 Grid System 個人覺得確實比較好上手，起碼他所提供的 Template 就已經是無敵了啊！

You might also like...