1、柵格系統(tǒng)的形成

柵格系統(tǒng)（Grid system）zui早使用在17世紀(jì)末的法國(guó)印刷業(yè)，出版業(yè)。

維基百科對(duì)其定義為：柵格設(shè)計(jì)系統(tǒng)（又稱網(wǎng)格設(shè)計(jì)系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面設(shè)計(jì)風(fēng)格、國(guó)際主義平面設(shè)計(jì)風(fēng)格），是一種平面設(shè)計(jì)的方法與風(fēng)格。

網(wǎng)頁(yè)柵格系統(tǒng)是有平面柵格系統(tǒng)中發(fā)展而來(lái)，以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。

2、柵格系統(tǒng)的原理

柵格系統(tǒng)可以按柵格數(shù)分為12列，16列，24列等，可以自由設(shè)計(jì)柵格寬度和柵格與柵格間寬度。如下圖所示，記頁(yè)面或區(qū)塊寬度為W，A代表一個(gè)柵格單元的寬度，a代表一個(gè)柵格的寬度，i為柵格與柵格之間的距離，n為正整數(shù)，則有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。

（A*n）-i = W 這個(gè)公式表述了網(wǎng)頁(yè)的布局與網(wǎng)頁(yè)背后柵格系統(tǒng)之間的關(guān)系。

在柵格系統(tǒng)中，設(shè)計(jì)師根據(jù)需要指定不同的版式或者劃分區(qū)塊改變A和i的值進(jìn)行設(shè)計(jì)，這樣，一個(gè)柵格系統(tǒng)的應(yīng)用就從此開(kāi)始了。

3、經(jīng)典960柵格

設(shè)計(jì)師們偏愛(ài)用蘋(píng)果系統(tǒng)做設(shè)計(jì)，蘋(píng)果下瀏覽器的默認(rèn)寬度為960px, 在 1024 x 768 的分辨率下，我們?cè)俅蜷_(kāi)Firefox，自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁(yè)的實(shí)際大小為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣出現(xiàn)了。960只是個(gè)符號(hào)，并不是標(biāo)準(zhǔn)數(shù)。

共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標(biāo)記為：

N(960) = N(2^6 * 3 * 5) = 26

根據(jù)上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22

N(480) = N(2^5 * 3 * 5) = 22

N(720) = N(2^4 * 3^2 * 5) = 28

N(750) = N(2 * 3 * 5^3) = 14

N(800) = N(2^5 * 5^2) = 16

N(960) = N(2^6 * 3 * 5) = 26

N(1000) = N(2^3 * 5^3) = 14

N(1024) = N(2^10) = 9

N(1440) = N(2^6 * 3^2 * 5) = 34

N(1920) = N(2^7 * 3 * 5) = 30

N越大，可組合的寬度值就越多。對(duì)柵格系統(tǒng)來(lái)說(shuō)，這意味著越靈活。

目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時(shí)保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網(wǎng)頁(yè)柵格系統(tǒng)中的zui佳寬度了，也許不久的將來(lái)，將會(huì)流行1440。

4、使用柵格系統(tǒng)的優(yōu)勢(shì)

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，柵格系統(tǒng)更多的是一種布局思想，可以更有邏輯地進(jìn)行設(shè)計(jì)工作。靈活地運(yùn)用柵格系統(tǒng)，不僅可以讓整個(gè)網(wǎng)站各個(gè)頁(yè)面的布局保持一致，讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，讓設(shè)計(jì)稿有更好的結(jié)構(gòu)，更可以通過(guò)匹配不同組合，做出很多優(yōu)秀和獨(dú)特的排版設(shè)計(jì)。

使用網(wǎng)格系統(tǒng)，可以使網(wǎng)頁(yè)設(shè)計(jì)給用戶正式感和規(guī)范感，還具有一種結(jié)構(gòu)分明的設(shè)計(jì)感，提升用戶體驗(yàn)。網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩，一味按照網(wǎng)格線來(lái)進(jìn)行布局。網(wǎng)格系統(tǒng)的意義在于更靈活的幫助設(shè)計(jì)師有序布局，而不是限制設(shè)計(jì)師的設(shè)計(jì)。

對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，柵格系統(tǒng)的使用，給整個(gè)網(wǎng)站的頁(yè)面結(jié)構(gòu)定義了一個(gè)標(biāo)準(zhǔn)，大大提高了網(wǎng)頁(yè)的規(guī)范性。在柵格系統(tǒng)下，頁(yè)面中所有組件的尺寸都是有規(guī)律的，可重用的，這對(duì)于大型網(wǎng)站的開(kāi)發(fā)和維護(hù)來(lái)說(shuō)，能節(jié)約不少成本。

隨著響應(yīng)式設(shè)計(jì)的流行，柵格系統(tǒng)開(kāi)始被賦予新的意義，那就是，一種響應(yīng)式設(shè)計(jì)的實(shí)現(xiàn)方式。響應(yīng)式的要點(diǎn)是為同一個(gè)頁(yè)面設(shè)計(jì)多種布局形態(tài)，分別適配不同屏幕尺寸的設(shè)備。

可以看到，一個(gè)頁(yè)面可以拆分成多個(gè)區(qū)塊來(lái)理解，而正是這些區(qū)塊共同構(gòu)成了這個(gè)頁(yè)面的布局。根據(jù)不同的屏幕尺寸情況，調(diào)整這些區(qū)塊的排版，就可以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。而借助柵格系統(tǒng)，設(shè)計(jì)與前端開(kāi)發(fā)人員可以很容易的設(shè)計(jì)和創(chuàng)建響應(yīng)式的頁(yè)面布局。

柵格系統(tǒng)是一種格式化的設(shè)計(jì)工具，使用柵格系統(tǒng)是一種好的習(xí)慣，設(shè)計(jì)師可以更專注于內(nèi)容呈遞，更專注于強(qiáng)調(diào)重點(diǎn)。當(dāng)然，規(guī)矩是用來(lái)打破的，當(dāng)我們理解了布局的理念，掌握了柵格的手法之后，也無(wú)需拘泥于柵格的形式，可以對(duì)其“革命”，進(jìn)行創(chuàng)新。

http://www.dongguanlifeng.com/wangzhansheji/3294.html 干貨：網(wǎng)頁(yè)設(shè)計(jì)之柵格系統(tǒng)