柵格系統溯源：1692 年的科學實驗

法王路易十四下令成立皇家印刷委員會，數學家 Nicolas Jaugeon 領銜，以羅馬體為基礎，方格為單位：每字體方格 64 基本單位，每單位再分 36 小格，印刷版面共 2304 小格。在嚴謹幾何網格中設計字形、版面編排、測試傳達效能——這是世界最早字體版面科學實驗，也是柵格系統雛形。

定義與價值

柵格系統 = 以規則網格陣列指導網頁版面佈局與信息分布。源自平面設計，二戰後風靡，成出版主流風格。Web 中應用：信息呈現更美觀易讀、可用性更強；前端開發更靈活規范。

設計原理與核心公式

頁面寬度 W 分割為 n 個網格單元 a，間隙 i，定義 A = a + i。
推導：W = (a × n) + (n-1)i = (A × n) - i

Yahoo 實戰驗證

W = 950px, i = 10px → A = 40px。
公式：(40 × n) - 10 = W
n 取值對應 W 變化表：

Yahoo 首頁區塊 n 值分別為 4、11、9，總和 24，恰為 n=24 時 W=950px。得出應用模式：橫向區塊 n 值之和 = 總列數 (24)，即可保證頁面寬度恆定。

柵格系統的多維價值

• 視覺設計師：無需為每頁重新思考寬高，統一標準。
• 前端工程師：佈局規范可復用，大幅降低開發成本。
• 內容編輯/廣告銷售：廣告尺寸規範化通用，無需製作 N 套不同尺寸素材。

局限與實踐智慧

內容不確定導致高度不確定的頁面，高度維度無法套用柵格。具體情況具體分析，需設計師實戰中不斷總結經驗。衍生新柵格系統只需調整 A、i 值，根據項目實際制定。