網格佈局、柵格化佈局、榻榻米佈局

一. 網格佈局

據說把柵格化佈局稱為網格佈局更合適一些，網格給人的直觀感受是縱橫交織的方格子，柵（shan/zha?）格個人的感覺可能只是縱向的（如果唸 zha 不唸 shan 的話），事實上網格佈局的應用一般只是縱向的，即固定列寬，而網格佈局其實也可以固定行高，實現真正的網格

本文末尾提供好用的線上方案生成工具以及經典的 960 寬度 24 列網格示例

二. 起源

1692 年，新登基的法國國王路易十四感到法國的印刷水準強差人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的，重視功能性的新字體。

委員會由數學家尼古拉斯加宗 (Nicolas Jaugeon) 擔任領導，他們以羅馬體為基礎，採用方格為設計依據，每個字體方格分為 64 個基本方各單位，每個方各單位再分成 36 個小格，這樣，一個印刷版面就有 2304 個小格組成，在這個嚴謹的幾何網格網絡中設計字體的形狀，版面的編排，試驗傳達功能的效能，這是世界上最早對字體和版面進行科學實驗的活動，也是柵格系統最早的雛形。

網格佈局最早是用於印刷行業的，比如報紙的排版就是嚴格遵循網格佈局的，報紙上分為大大小小的內容塊兒，但給人的總體感覺比較舒服，沒有零零散散的參差感。另一方面，基於網格的嚴謹佈局能夠統一頁面風格，減少不同頁面給人的視覺差異

網格佈局主要用於網頁大量資訊展示，比如門戶網站的首頁，看起來確實像報紙一樣

三. 960 與網格佈局

如果了解過網格佈局，一定會發現 960 這個反覆出現的數字，有的文章說 960 和黃金分割有關，其實不然

960 寬度是市場的選擇，在 1024x768 時代，960 差不多就是全屏的寬度（嚴格地說應該是 viewport 寬度），和黃金分割沒什麼關係

2008 年的時候有一大波 960 寬度的柵格佈局，如下表：

網站	首頁頁面寬度 px
Yahoo!	950
淘寶	950
MySpace	960
新浪	950
網易	960
Live Search	958
搜狐	950
優酷	960
AOL	960

而現在這些站點的寬度大多已經不再是 960 了，比如：新浪（1000）、淘寶（1190）、雅虎（1130）、網易（960）、搜狐（950）、優酷（1190）、AOL（964）、ebay（980）

可以預見，如果螢幕變得更寬（解析度變得更高）的話，將出現更大寬度的網格佈局

四. 實現原理

總寬度（width）記為 W, 列寬（column width）記為 c, 列間距（column gutter）記為 g, 留白（margin）記為 m, 列數（column number）記為 N, 可以得到以下式子：

W = c * N + g * (N - 1) + 2 * m

一般來說，Gutter 的寬度是 Margin 的兩倍（g = 2m），上面的式子可以簡化為：

W = c * N + g * (N - 1) + g = (c + g) * N

令 c + g = C, 式子變得非常簡單：

W = C * N

經典的網格佈局中，950 是實際寬度（去掉左右 margin），960 是總寬度 W，非常簡單的算術式，並不神秘。最常見的 24 列（列寬 40px 列間距 8px）網格，就是用這個簡單式子算出來的

五. 榻榻米佈局

榻榻米是日本人的家具（床），是 3 行 4 列網格佈局，這是一種看著很舒服的佈局，比如類似於 wp 和 win8 metro 的佈局

對 3x4 網格進行分割，可以得到 3164 種不同的佈局，在 PAD 上的內容應用排版中被廣泛應用

六. 黃金分割

黃金分割可以歸結為數學問題：對於長度為 1 的線段，將其分成兩部分 x 和 1 – x, 使得：

x / 1 = (1 - x) / x

化為簡單的二次方程：

x^2 + x - 1 = 0

正數解為：

x = (sqrt(5) - 1) / 2 ~= 0.618

黃金分割在設計中有相當高的地位，平面設計也不例外，網格佈局中也可以應用黃金分割，比如經典的 960 寬度 24 列網格中，列寬 40 列距 10，最接近黃金分割比例（363/587）的二分欄方式是 9 列（350） + 15 列（590）