1. Author: Hina, Cain Chen.
Section 1. 前言
對於 CSS Framework 是 不 是 真 的 有 利 於 增 加 網 頁 設 計 師 的 產 能， 我 個 人 是 覺 得 見 仁 見 智 。 由 於 這些
Framework 並不是非常容易上手的一件事情，所以要將應用這些工具就能增加產能掛上邊， 我還是覺得過於武
斷。
不過，既然決定使用 CSS Framework，那麼就善用這些工具所帶來的便利性，我想這才是這些工具所能帶來的
實際效益。 應該不難看出這個介紹也是使用 960 Grid System 來完成，接下來就繼續來說明 960 Grid System 這
個工具， 對於網頁設計這個區塊，是否能夠帶來顯而易見的成效。
Section 2. 何謂 Grid System ?
顧名思義，他是一種簡易的基準系統，或者說，他在對於製作頁面輸出上，提供了一種（或多種）的輸出標準，
讓設計者能夠依循這樣的輸出標準，將製作頁面能夠依循一種統一的規則來作輸出。
市面上這樣的系統不少，比較有名的甚有 Blueprint 或是 Yahoo! YUI Grid，這裡選擇了 960 Grid System 來作
介紹， 其實最大的主因，就是他比較簡單，相對的，簡單的代價就是，他的核心彈性並不像其他的 Grid System
來的高。 不過，在 960.gs 上，也提供了幾個產生器，能夠依照 960 Grid System 的基礎，產生不同標準的檔
案。
Section 3. 怎麼開始？
首先，960.gs 非常貼心的提供了 sketch sheets PDF 給我們，我們就利用這個檔案來規劃我們腦中的概念。 我們
以一個部落格的頁面來作發想與規劃，我盡量讓這樣的實作能簡單易懂（以下的圖例皆依照 Grid 規則，畫面上為
了不那麼死板所以沒有很精準）。
首先，我們需要一個框框。
1／8

2. 接著，我們要在這個框框中擺許多區塊。這些區塊基本上都依循這個 sketch sheets 的規則在走（也許畫面看起
來不是）， 我們盡可能的讓這些區塊能夠依照這個規則，這樣在作輸出時會比較便利。
再來，我們要算出這些區塊佔了多少位置。
2／8

3. 最後，我們稍微補充一下區塊的說明。
接著就是視覺設計的時間，由於我不是視覺設計，所以在這裡不能實作給大家看。不過，還是有幾個小地方必須
要提醒大家。
1. 由於 Grid 都是固定寬度，所以頁面設計時難免有不符合的地方，請斟酌區塊的擺放。
2. 倘若頁面完全不符合 Grid System 的基準，就必須考量這個畫面使用 Grid 是否恰當。
3. 若是有跳脫 Grid 設計規則的地方，必須特別註明！一個畫面若跳脫太多，請回到第 2 點重新評估。
4. CSS 還是有許多奇淫技法可用，但是在 Grid System 中請勿濫用，不然就不叫作 Grid System 了。
3／8

4. Section 4. Hard code
如果你對於 HTML 很陌生的話，那我想你得先去稍微了解一下他是什麼東西，做甚麼用的，再回來看會比較妥
當。 當然，我不希望這裡有這種事情發生，所以，我假設大家都對 HTML 有相當程度的了解，最好是對 CSS 也
能有基礎的概念。 畢竟這裡說的是 CSS Framework，倘若對 CSS 不甚了解也太說不過去了吧。
首先，我們要先把 960 Grid System 需要的檔案準備好。
1 <link rel="stylesheet" media="all" type="text/css" href="./styles/reset.css" />
2 <link rel="stylesheet" media="all" type="text/css" href="./styles/960.css" />
3 <link rel="stylesheet" media="all" type="text/css" href="./styles/text.css" />
接下來，請你回去看上一章節的第三張圖，那裡有我們計算出用了多少欄位的資料。 我們的外框使用了 14 欄，
所以我們要使用 960 Grid 中的 16 欄位設定，關於欄位相關資訊，可以參考我的部落格文章（這就叫作置入性行
銷嗎）。
1 <div class="container_16">
2 </div>
那我們只用了 14 欄怎麼辦呢？所以，我們要在左右兩邊各塞入 1 欄空的欄位。
1 <div class="container_16">
2 <div class="grid_1"><!-- 空的 --></div>
3 <div class="grid_14">
4 <!-- 這裡就是我們主要的欄位 -->
5 </div>
6 <div class="grid_1"><!-- 空的 --></div>
7 </div>
再來，我們要放入各個區塊，注意到每個區塊都有不同顏色了嗎！我們依照各種不同顏色的區塊放置來說明。
01 <div class="container_16">
02 <div class="grid_1">&nbsp;<!-- 空的 --></div>
03 <div class="grid_14">
04 <!-- 這裡就是我們主要的欄位 -->
05
06 <div class="blue">
07 <!-- 這裡是藍色 8 行高的區域 -->
08 <div class="light-blue"><!-- 這裡是淡藍色 1 行高的區域 --></div>
09 <div class="prefix_9">
10 <div class="green"><!-- 這裡是淡綠色的區域 --></div>
11 </div>
12 </div>
13 <div class="suffix_10 sidebar">
14 <div class="red"><!-- 這裡是紅色的區域 --></div>
15 </div>
16 <div class="prefix_4 content">
17 <div class="yallow"><!-- 這裡是黃色的區域 --></div>
18 <div class="purple"><!-- 這裡是紫色的區域 --></div>
19 </div>
20 </div>
21 <div class="grid_1">&nbsp;<!-- 空的 --></div>
22 <br class="clear" />
23 </div>
4／8

5. 這樣就結束了嗎？先來看看實際在瀏覽器上會是什麼樣子吧！畢竟眼見為憑嘛，這個東西真的這麼好用嗎？
這好像跟我們當初所構想的樣子差太多了！為什麼呢？到底是為什麼！為什麼！為什麼！（翻桌）！ 縱使我們稍
微調整了 CSS 的高度設定，他的效果依舊不如預期。
為什麼？
5／8

6. Section 5. 限制與解決方案
相信上一章節文末的圖應該讓人覺得很失望吧！是的，縱使他是讓人能夠方便操作輸出的工具，其實必然還是有
其限制。 任何一種 Grid System 並不會同時針對欄與行有詳細的設定，多半都是針對欄位的設定。
所以，一旦遇到需要跨行（且浮動）的物件時，這樣的工具並不能帶來多大的便利性，這是先天的限制。 當然，
如果您要開發出一套針對跨行的 Grid System 也無不可，記得要分享給我。
怎麼辦？
首先，對自己所需要的畫面與製作輸出，要有足夠的概念知道該怎麼呈現。我覺得這很重要，當一個視覺元素必
須 要在頁面上呈現時，我必須知道可以怎麼放，如果我的方式無法滿足，是不是有任何方法可以呈現。說實在
的，常 常看到很多視覺設計非常的精彩，但是就是無法很完美的在網頁設計上呈現？為什麼？我只能很殘酷的
說，因為你 還不是專精的網頁設計師。
回到剛剛的問題畫面：
我們重新思考剛剛的 HTML 是否出了甚麼問題？
藍色區塊似乎沒有問題。
最旁邊的兩個 grid_1 可以直接用 prefix_1 取代。
紅色與黃色區塊是否應該拆開？
紅色區塊使用 suffix_10 會導致黃色區塊無法 clear: right; 向右推齊。
紅色與黃色區塊一定要拆開，該怎麼拆？
6／8

7. 接著，我來拆給你們看：
01 <div class="container_16">
02 <div class="prefix_1 grid_14">
03 <div class="blue">
04 <!-- 這裡是藍色 8 行高的區域 -->
05 <div class="light-blue">
06 <!-- 這裡是淡藍色 1 行高的區域 -->
07 </div>
08 <div class="prefix_9">
09 <div class="green"><!-- 這裡是淡綠色的區域 --></div>
10 </div>
11 </div>
12 </div>
13 <div class="prefix_1 grid_4 sidebar">
14 <div class="red"><!-- 這裡是紅色的區域 --></div>
15 </div>
16 <div class="grid_10 context">
17 <div class="yallow"><!-- 這裡是黃色的區域 --></div>
18 <div class="purple"><!-- 這裡是紫色的區域 --></div>
19 </div>
20 <br class="clear" />
21 </div>
實際的結果是什麼呢？請看：
看起來似乎是好多了？是嗎？那麼，還有一個小缺陷，紅色區塊並沒有向上蓋住藍色的區塊。 至於你問我該怎麼
讓他蓋上去？若你了解關於 CSS position 的相關設定的話，我想你應該不會問這樣的問題吧。
1 .sidebar {
2 top: -100px;
3 }
我想實際的演示效果我就不在此贅述了。
7／8

8. Section 6. 結語
人人 Layout 都有一把尺，請當寶劍用！
我的文件：
http://blog.hinablue.me
[CSS tech.] 960 grid system 簡單介紹
[CSS tech.] Blueprint CSS part 2
[CSS tech.] Blueprint CSS simple howto
[Layout tech.] Web Design note with XHTML/CSS final
[Layout tech.] Web Design note with XHTML/CSS part 4
[Layout tech.] Web Design note with XHTML/CSS part 3
[Layout tech.] Web Design note with XHTML/CSS part 2
[Layout tech.] Web Design note with XHTML/CSS part 1
參考文件：
960 Grid System
960 CSS Framework – Learn the Basics
Tricks to Solve 960 CSS Framework Problems
BluePrint
8／8