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

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

柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實是一回事。不過從定義上說，柵格更為準確些，從維基百科查到柵格的定義為：柵格設計系統(tǒng)（又稱網(wǎng)格設計系統(tǒng)、標準尺寸系統(tǒng)、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，已成為今日出版物設計的主流風格之一。

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

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

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

一個標準的柵格系統(tǒng)，包括以下部分：

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

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

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

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

將c+g標記為C,公式變得非常簡單：

W = C * N

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

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