回頭看 1990 年代末到 2000 年代初的網站，常會覺得版面東一塊西一塊：圖片和文字對不齊，每一頁的左右邊界都不一樣，選單忽寬忽窄。這除了跟當時的審美有關，很大一部分原因是網頁還沒有一套被普遍接受的排版方法。網頁網格系統就是在這個階段，從平面設計借進來的一套工具。它讓網頁版面有了可以計算、可以重複使用的骨架，也讓「做網站」從個人手感慢慢變成一門有規範的專業。這篇文章從網格的平面設計源頭講起，說明它在早期網頁上怎麼被應用，以及它為什麼推動了網頁排版的專業化與標準化。
網格從平面設計來：版面背後的隱形骨架
網格不是網頁時代才發明的。報紙、雜誌、書籍、海報的排版人員很早就用一組看不見的直線與橫線來規劃版面：先決定紙張四周留多少邊界，再把版心切成幾個欄位，欄與欄之間保留固定的間距。所有標題、照片、內文都對齊這些線條擺放，讀者雖然看不到格線，卻會感覺版面整齊、閱讀順暢。20 世紀中期在歐洲發展的瑞士國際主義平面風格，就把這套方法發展得相當成熟，強調理性、對齊與留白。
網格的核心元素其實不多，掌握下面幾個就能看懂大部分版面：
- 邊界（margin）：版面最外圍的留白，決定內容區的範圍。
- 欄（column）：內容垂直切分的單位，例如 12 欄、16 欄。
- 欄距（gutter）：欄與欄之間的空隙，避免內容擠在一起。
- 模組（module）：欄位與橫向分割交錯形成的格子，可用來安排圖片或區塊。
這套方法的價值在於「先定規則，再放內容」。編輯換了一篇新文章，版面依然維持一致，不需要每次重新思考每個元素要放在哪裡。這正是後來網頁設計最需要的能力。
2000 年代初的網頁排版困境
在網格觀念普及之前，網頁版面大多靠 HTML 表格（table）拼出來。設計師在影像軟體裡畫好整張版面，再切成一塊塊圖片，塞進表格的儲存格裡。為了撐出空白，還會放進透明的小圖片當作間隔。這種作法在當時的瀏覽器上看起來還算整齊，但程式碼非常臃腫，改一個區塊的寬度，常常要牽動整張表格重新調整。
更大的問題是缺乏一致性。每一頁的欄寬、間距、對齊方式往往由當下製作的人自己決定，網站越做越大，頁面之間的差異就越明顯。設計師交出的設計稿沒有標示規則，工程師只能自己去量像素，雙方溝通全靠反覆來回修改。隨著網頁標準運動推動以 CSS 負責呈現、HTML 負責結構的觀念，業界開始需要一套能用 CSS 描述、又能讓設計與開發都理解的版面規則，平面設計的網格就很自然地成為參考對象。
網頁網格系統的初步應用：固定寬度與欄位計算
早期網頁網格的典型作法，是先決定一個固定的版面總寬度。當時常見的螢幕解析度是 1024×768，扣掉瀏覽器捲軸與邊框後，大約 960 像素的寬度可以完整顯示，於是 960 像素成了許多網站採用的寬度。960 這個數字還有一個好處：它能被 2、3、4、5、6、8、10、12、15、16 等許多數字整除，切成各種欄數都很方便。
以常見的 12 欄配置為例，每欄寬 60 像素，每欄左右各留 10 像素，等於欄距 20 像素，12 欄加起來剛好是 960 像素。設計師要做三欄式版面，就讓每個區塊佔 4 欄；要做側欄加主內容，可以用 3 欄配 9 欄。若改用 16 欄配置，則是每欄 40 像素、欄距 20 像素。工程師把這套規則寫成 CSS，大致像這樣：
.container { width: 960px; margin: 0 auto; }
.grid_3 { float: left; width: 220px; margin: 0 10px; }
.grid_4 { float: left; width: 300px; margin: 0 10px; }
.grid_9 { float: left; width: 700px; margin: 0 10px; }計算方式很直觀：佔 N 欄的寬度等於 N × 60 再加上 (N − 1) × 20。例如 4 欄就是 240 + 60 = 300 像素。當時的版面多半用浮動（float）讓區塊橫向排列，再用清除浮動的技巧收尾。這些寫法後來被整理成現成的 CSS 網格框架，設計師下載對應的設計稿範本，工程師套用同一套類別名稱，雙方就能用同一把尺工作。
網格如何讓網頁走向專業化與標準化
網格帶來的第一個改變，是設計與開發之間有了共同語言。設計師不再只交出一張漂亮的圖，而是交出「這個區塊佔 8 欄、側欄佔 4 欄、欄距 20 像素」這樣可以直接轉成程式的規格。工程師也不用逐一量測像素，照著欄數套用類別就能還原版面，修改時只要調整欄數，不必重拆整張表格。溝通成本降低，重工的情況通常也會減少。
第二個改變是整站的一致性。當所有頁面都建立在同一套欄位上，首頁、產品頁、文章頁的左右邊界和對齊線就會自然一致，使用者在頁面之間切換時，視線比較不需要重新適應。對企業來說，這有助於讓網站看起來更有秩序；對製作團隊來說，新增頁面時有既定框架可以依循，不容易越做越亂。
第三個改變是可重複使用與可傳承。網格規則寫成 CSS 後，新的專案可以直接沿用，新進人員只要學會欄位邏輯，就能比較快接手。網頁製作因此逐漸形成固定流程：先定網格、再畫線框、再做視覺、最後切版。這套流程讓網頁設計從靠個人經驗的手工活，變成可以教、可以檢查、可以分工的專業工作。
初期網格的限制與實務注意事項
早期網格也有明顯的侷限。最大的問題是固定寬度：960 像素在大螢幕上兩側會留下大片空白，在較小的視窗上則會出現水平捲軸。浮動排版也很脆弱，某個區塊內容太長或寬度算錯 1 像素，整排區塊就可能掉到下一行。這些問題提醒我們，網格是工具而不是枷鎖，套用時仍要檢查實際內容的長短與呈現。
從這段歷史可以整理出幾個至今仍適用的判斷方式：
- 規則要先於內容：先確定總寬度、欄數與欄距，再開始擺放元素，避免邊做邊調。
- 欄距與邊界要固定：同一個網站內，間距數值的種類越少越好，一致性才容易維持。
- 設計稿要標示網格：交付時附上欄位規格，工程師還原時才有依據。
- 允許有理由的破格：大型橫幅或主視覺可以跨越欄位，但應是刻意設計，而非對不齊的意外。
檢視自家網站時，可以試著在腦中畫出幾條垂直線，看看標題、圖片、按鈕是否落在相同的線上，各頁的左右邊界是否一致。這個簡單的檢查，通常就能看出網站背後有沒有一套清楚的網格。