網(wǎng)頁中的柵格化系統(tǒng)

1，什么是柵格化系統(tǒng)?

柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實(shí)是一回事。不過從定義上說，柵格更為準(zhǔn)確些，從維基百科查到柵格的定義為：柵格設(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)格。運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。

2，網(wǎng)頁中的柵格系統(tǒng)

是以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局，使得網(wǎng)頁便于閱讀，讓網(wǎng)頁規(guī)范規(guī)整；

一下網(wǎng)頁使用的是網(wǎng)頁柵格布局，里面的想相關(guān)信息根據(jù)網(wǎng)格做了相應(yīng)對(duì)齊；頁面看上會(huì)整潔規(guī)范；

一個(gè)標(biāo)準(zhǔn)的柵格系統(tǒng)，包括以下部分：

將Flowline的總寬度標(biāo)記為W, Column的寬度標(biāo)記為c, Gutter寬度標(biāo)記為g, Margin的寬度標(biāo)記為m, Column的個(gè)數(shù)標(biāo)記為N,我們可以得到以下公式：

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

一般來說，Gutter的寬度是Margin的兩倍，上面的公式可以簡(jiǎn)化為：

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

將c+g標(biāo)記為C,公式變得非常簡(jiǎn)單：

W = C * N

如果每次設(shè)計(jì)前都要計(jì)算，那就太麻煩啦，這里推薦幾個(gè)網(wǎng)站，可以有效的輔助設(shè)計(jì)。

總之，對(duì)于內(nèi)容信息不確定導(dǎo)致高度不確定的頁面，在高度層面上就無法做到柵格了。當(dāng)然，具體的情況還需具體的分析與解決，這就需要設(shè)計(jì)師們?cè)趯?shí)際的應(yīng)用中不斷的總結(jié)經(jīng)驗(yàn)，不斷實(shí)踐了。