## 一、什么是柵格系統？ 柵格系統英文為`Grid Systems`，也有人翻譯為網格系統，運用固定的格子，遵循一定的規則，進行頁面的布局設計，使布局規范簡潔有規則。 ### 1、柵格 柵格最早起源于平面設計。1692年法國為提高印刷水平，以方格為設計基礎，將一個印刷版面分成上千個小格，這就是最早的柵格雛形。再后來，慢慢演變成運用固定的格子設計版面的平面設計風格。  ### 2、網頁柵格 包括網頁端和移動端，是以規則的網格陣列來指導規范界面中的版面布局以及信息分布。 ### 3、為什么要使用柵格 通過柵格的使用，可以用邏輯解釋商業設計的細節問題。設計內容都應該有所依據，當其他人質疑時，可以系統有底氣的解釋設計內容。設計師可以利用柵格讓畫面更有調性，讓內容更具可讀性；可以快速校準元素的位置，讓畫面更平衡；可以模塊化地管理元素，讓版面更有層次感。 ## 二、柵格基礎七要素 ### 1、最小單位 需要先定好界面的單位基礎，后續內容元素和布局規則都是基于它整數倍遞增。 * 網頁端最小單位：10 * 移動端最小單位：3、4、5  ### 2、總寬度 W 總寬度：對整體布局進行規范，且還可以保證設計尺寸的統一性。 界面設計要有具體尺寸，由于內容多少不確定，所以高度沒有辦法定死，但內容區的寬度是可以定的。  ### 3、列數 N 列數是界面總寬度設定好后，縱向等分成幾列。 * 網頁端：12列、24列（常用等分列數，當然不是固定的，需要根據自己的內容設定列數） * 移動端：6列（常用等分列數）  ### 4、大列寬 L 把界面總寬度等分成幾列，每一列的寬度即為大列寬。計算公式：L = W / N（大列寬包含：列寬和水槽）。  ### 5、水槽 G 相鄰兩個列寬之間的間隔是水槽。水槽寬度越大，頁面留白和呼吸感會更好，反之則更緊湊。水槽可以將內容更規范的區分開來。  ### 6、列寬 C 把界面總寬度等分成列，相鄰兩列之間的間隔（水槽）減去后就是列寬。  ### 7、安全邊距 界面左右能保證可讀性和美觀度的、合適的空隙就是安全邊距。計算公式：M = G / 2（安全邊距是水槽的0.5倍）。 除了使用水槽的0.5倍，還可以使用0、0.5、1.0、1.5、2.0等水槽的倍數。舉例：水槽是20，使用0.5倍，安全邊距為10；水槽是20，使用2.0倍，安全邊距為40。