溫馨提示：這是一篇非常非骋滦危基礎(chǔ)的關(guān)于柵格的文章，如果你已經(jīng)對柵格系統(tǒng)有了深入的理解姿鸿， 就不用浪費時間看這篇文章了谆吴！
以前有很長一段時間，我一直搞不明白到底什么是柵格苛预，聽過很多解釋之后還是云里霧里的句狼，后來發(fā)現(xiàn)有很多小伙伴也都有這樣的疑問，所以決定分享一下自己對柵格系統(tǒng)的理解热某。
首先我們必須要對柵格系統(tǒng)有一個基本的認(rèn)知腻菇，我將這四個字拆分開成“柵格”和“系統(tǒng)”兩個詞來分別解釋。
關(guān)于柵格
柵格是由網(wǎng)格演變而來的另一種說法昔馋，都是一個意思——格子筹吐，所以不要覺得柵格有多高深復(fù)雜，如果把他描述成格子秘遏，你還覺得它有多難理解嗎丘薛？
其實我們都是柵格專家，因為在我們幾歲的時候邦危，就已經(jīng)接觸了很多柵格洋侨，比如方格本：
再比如飛機格：
關(guān)于系統(tǒng)
我個人理解，系統(tǒng)就是規(guī)則倦蚪，例如ios系統(tǒng)凰兑，它有它的規(guī)則：屏幕尺寸規(guī)則，代碼語言規(guī)則等等审丘，想在它的系統(tǒng)里做app吏够，就需要遵循的它的規(guī)則。
柵格有了規(guī)則滩报，也就形成了我們所說的柵格系統(tǒng)锅知。
所以今天的重點來了，柵格系統(tǒng)（規(guī)則）到底包含哪些內(nèi)容呢脓钾？
我通過研究sketch軟件的一些柵格設(shè)置選項來反推柵格系統(tǒng)包含的內(nèi)容售睹，得到柵格系統(tǒng)基礎(chǔ)六要素，大綱如下：
1.柵格的最小單位
2.屏幕總寬度
3.列數(shù)
4.列寬
5.水槽
6.安全邊距
1.柵格的最小單位
最小單位是需要優(yōu)先定好的可训，因為后面的所有規(guī)則都基于它來制定昌妹。
下圖就是在sketch設(shè)置柵格大小的頁面：
如果你用sketch卻不知道上面這個界面是哪里調(diào)出來了捶枢，請出門左拐去百度一下！
這里再簡單介紹一下：pc端常用最小單位是10飞崖，移動端常用最小單位是3烂叔、4、5固歪，不過這些也不是固定的蒜鸡，還是那句話，能解決工作上的實際問題就是正確的牢裳。
2.屏幕總寬度
做界面設(shè)計會先依附于一個尺寸逢防，由于內(nèi)容的多少是不確定的，所以高度我們沒有辦法定死蒲讯，但內(nèi)容區(qū)的寬度是可以定的忘朝，sketch給我們的默認(rèn)屏幕寬度是960，網(wǎng)頁設(shè)計中最受歡迎的一個尺寸：
3.列數(shù)
簡單來說就是整個界面縱向被分為幾欄判帮，sketch默認(rèn)幫我們分為12列辜伟，這是網(wǎng)頁端的常用分法，移動端一般是6等分脊另。
4.列寬
當(dāng)960寬度的界面被縱向12等分后导狡，我們可以輕易的計算出每一份的寬度是80，而這80的寬度其實又包含兩個內(nèi)容偎痛，一個是列寬旱捧，一個是水槽，如下圖：
每一條灰色區(qū)域都是我們所說的一條列寬踩麦，sketch的默認(rèn)列寬是60：
5.水槽（間隔）
灰色區(qū)域是列寬枚赡，所以紅色區(qū)域自然就是水槽（間隔）了。
畢竟界面內(nèi)容之間是需要間隔的谓谦，不可能都堆在一起贫橙，所以水槽的作用就是將內(nèi)容更規(guī)范的區(qū)分開來。
6.安全邊距
做app界面的時候反粥，我們都會設(shè)置一個屏幕安全邊距卢肃，因為當(dāng)信息帖在屏幕邊上的時候，不僅會影響可讀性才顿，也會影響美觀度莫湘。網(wǎng)頁端同樣也會有一個安全邊距，它是如何來的呢郑气？
還是這張圖：
我們看上圖幅垮，屏幕的最右側(cè)是一個水槽，說明右側(cè)是有安全邊距的（一個水槽的寬度）尾组，而屏幕左邊沒有空隙忙芒，那我們是不是可以將最右側(cè)的水槽分成兩份示弓，拿一份放置最左側(cè)？如下圖：
當(dāng)然是可以的呵萨，因為sketch已經(jīng)幫我們做好了這個設(shè)置選項奏属，如下圖
至于柵格的顏色、形式也可以自己調(diào)整甘桑，設(shè)置選項里都有。
以上就是柵格系統(tǒng)的基本認(rèn)知及基礎(chǔ)六要素歹叮，只有透徹的理解了這些基礎(chǔ)概念跑杭，才有可能將柵格系統(tǒng)更好的運用起來。
舉例驗證
最后我們通過上面的講解咆耿，驗證一下你是否真的有理解這幾個要素德谅，比如現(xiàn)在我們要制定一個寬度為1920的網(wǎng)頁柵格系統(tǒng)。
如果你用常用的12分欄萨螺，得到每一等分的寬度就是1920處12等于160窄做，160包括列寬和水槽，我們就可以定列寬為120慰技，水槽為40（列寬：水槽=3：1）椭盏。
安全邊距是水槽的一半，就是20吻商。
這樣一個1920的柵格系統(tǒng)就基本出來了掏颊。是不是很簡單。
大家一定要活學(xué)活用艾帐，很多數(shù)值都不是定死的乌叶，比如12分欄實在除不盡，那就16分欄柒爸；再比如列寬和水槽一定要3：1嗎准浴？也不一定，所以千萬不要一根筋哦捎稚！
這篇文章很基礎(chǔ)乐横，等我后期研究研究，再寫一篇深入一點的今野，不過先不給大家承諾時間了晰奖，哈哈。
