從 1692 年法國皇家印刷委員會的「科學字體實驗」（2304 微格網絡），到 960.gs 確立網頁開發標準，再到 3×4 榻榻米網格在 iPad/雜志 App 中的復興，柵格系統始終是信息排版的隱形憲法。本文梳理歷史脈絡、核心體系、變體邏輯與新生力量。

歷史溯源：從鉛字到像素的幾何基因

• 1692：Nicolas Jaugeon 領銜，羅馬體為基，方格單位科學化設計字體與版面 —— 柵格雛形
• 20 世紀中葉：瑞士國際主義設計將柵格推向純粹理性高峰
• 2007：Nathan Smith 創立 960 Grid System，12/16 欄變體，成為 Web 開發事實標準

960 柵格體系：從快速原型到工程基礎設施

BBC、Yahoo 門戶級應用驗證：柵格規範信息疏密、對齊基線、響應式斷點。個人/產品站點同樣受益於「大氣、寬廣」的視覺秩序。

3×4 榻榻米網格：移動端的黃金分割

• 1300 年前日本建築榻榻米鋪設邏輯（1×1, 1×2, 1×3, 1×4, 2×2, 2×3, 2×4, 3×3, 3×4）
• 3×4 矩形可生成 892 種單元形式，Patch Kessler 算法證明其組合爆炸潛力
• 2006 專利：針對矩形屏幕的 3×4 柵格可得 3164 種分割方式

PAD/雜志 App 實踐：Flipboard 引領潮流。縱/橫向二/三/四分欄，圖文跨欄，上下雙層異欄組合（如右下角三欄+兩欄）。每頁排版不重樣，閱讀節奏如報紙般舒適且更輕盈。

新生力量：Metro UI 與深度定制 Android

• Windows Phone 7 Metro：雙列色塊入口，榻榻米式自由組合，扁平化下的個性化秩序
• iida INFOBAR A01：首頁變應用拼圖，實時信息區域不顯雜亂，圖片瀏覽自然分層

參考資源庫

• GuideGuide (柵格插件)：cameronmcefee.com/guideguide/
• 3×4 Grid Poster：thomasgaskin.com/1097344/3-x-4-Grid-Poster
• 960px Templates：robbiemanson.com/resources/960px-grid-templates/
• The Grid System：thegridsystem.org/
• 3x4 Variations Poster：dubberly.com/wp-content/uploads/2011/03/3x4variations-poster.pdf
• Partitions Algorithm：mechanicaldust.com/Documents/Partitions_05.pdf

佈局是設計第一步，決定氣質。柵格系統經 50+ 年驗證，仍是最合理的佈局原理。不拘泥形式，掌握底層邏輯，方能在變化中保持秩序之美。