剛開始對柵格系統有很多疑惑，什么是柵格化系統？Bootstrap中為什么要使用柵格系統？設計師為什么要學習柵格系統？如何學習運用？后來發現有很多小伙伴也都有這樣的疑問，最近又看到大神Sky密圈的經驗分享，于是決定自己也整理一下柵格系統的理解和學習總結。

對于柵格系統

柵格就是網格，我們很小就會接觸到網格，比如小時候的方格本作文本，畫的表格等等，利用表格進行分類排版。UI中的柵格系統就是對各個平臺的網格布局進行系統化，比如網頁的網格定義，APP的網格定義。

設計師為什么要學習柵格系統？

柵格化系統是設計的一個基本原則，能夠有規律的排版頁面的布局，在CSS的Bootstrap中采用柵格系統能夠更好的進行頁面布局。柵格系統就是網格，利用建立的網格進行布局排版。在廣告排版、海報畫冊、網站界面等領域都能廣泛運用。

柵格化系統的最小單位

在UI設計柵格系統中的最小單位就是設計界面的單位基礎，界面內的設計元素和排版都是依照這個基礎單位建立和布局的，常見的Web端最小單位是10，移動端常用最小單位是3、4、5，不過這些也不是固定的，目前設計界面的最小單位變的越來越大國外很多軟件都流行了大留白。

列

列是柵格系統縱向排布依據，常用的PC端是12列，移動端是6列。列數越多縱向排布內容就可以越細致，但是版面內容就會變的更稠密，內容更碎。

行

行是柵格系統的橫向排布依據，目前大都是瀑布流形式顯示內容不固定高度讓行數變成未知數，很多設計師常會忽略行布局，合理運用行能夠讓頁面分類內容布局變的更合理化。

水槽

水槽就是列和行的分割間距，水槽越大頁面布局間距就越大，水槽越小頁面就越緊湊。需要強調的是，水槽里不能放置內容。

屏幕安全邊距

邊距就是柵格之外的屏幕邊緣內容，這里是不能放置內容的。移動端主要是兩邊與屏幕的邊緣距離，Web端就是指兩邊的留白區域。

內容區

內容區就是行和列交叉所形成的區域，主要用來放置設計內容。

以上幾個算是柵格系統的幾個基礎單位，記著幾個敏感數字，常用PC端最小單位是10，列是12；移動端最小單位是3，4，5，6，列是6，水槽和邊距不要放置內容。

在設計中，我們該如何定義柵格系統呢？

先根據你的項目類型面向風格決定這款產品的最小單位，然后決定水槽和安全邊距從而得到內容區大小。

這個該如何計算呢？

舉個例子，拿寬度為1920來說，如果你用常用的12分欄，得到每一等分的寬度就是1920除以12等于160，160包括列寬和水槽，我們就可以定列寬為120，水槽為40（列寬：水槽=3：1）。安全邊距是水槽的一半，就是20。這樣一個1920的柵格系統就基本出來了。

但是呢，咱們要活學活用根據根據自己情況來決定，也不是非得按這些死數據，可以根據自己的項目和平時積累的知識來決定柵格系統。

這里有柵格化系統設計的計算方法，如果你口算能力沒那么強，就拿出筆和計算器好好算一下吧！

柵格化系統設計的計算原理

當n ＝ 24, i = 10;假如A＝40，則W＝950；假如A＝50，則W＝1190；假如A＝60，則W＝1430。

當n ＝ 24, i = 20;假如A＝50，則W＝1180；

當n ＝ 12, i = 20;假如A＝100，則W＝1180；

柵格化是通過確定等分的單位寬度以及單位寬度之間的間距，把單位寬度進行組合的一種排版方式。在進行設計之前要做好計劃和計算。

工具的設置

PS中的網格設置

PS的網格插件(GuideGuide)

插件地址（guideguide.me）是付費的，免費的網上也有。

Sketch中的網格設置

Sketch中的布局設置

Sketch中插件(Craft)中的復制功能，其他的資源庫也很有用哦。

插件地址（www.invisionapp.com/craft）除此之外還有很強大的功能，大家可以研究一下。

這里只是簡單介紹了一下柵格系統在設計中的運用，大家要結合自己平時積累的知識來搭建自己項目的柵格系統，除此之外還要了解一些比例，布局的相關知識，像對角比例，三等分比例，三角形比例，黃金分割金色螺旋線比例等和各種類型布局知識。

感謝大家的關注和支持，大家一起學習。