文章插圖
2. 列（Column）列（Column）指的是柵格數量，如12柵格有12個列、24柵格就是24個列，主要用來對齊內容 。通過柵格的列數來控制版面的呼吸感及節奏感，列數越多、內容排版越精細，反之列數越少、內容排版就越疏松 。
文章插圖
3. 水槽（Gutter）水槽（Gutter）是指列與列之間的間距，通過留白以實現界面中的信息元素分割及版式呼吸感 。水槽的寬度對設計風格會存在一定影響，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、內容也會變得較為緊湊 。
文章插圖
4. 邊距（Margin）邊距（Margin）是指界面內容到屏幕邊緣的距離，主要用來控制核心內容的展示邊界，所以是禁止放置任何內容的（部分浮窗、返回頂部按鈕、右側吸附邊欄除外） 。邊距值的大小會直接影響到柵格區域空間，這點大家自行理解即可 。
文章插圖
5. 柵格總寬（Container）柵格總寬（Container）是指所有列加所有水槽再加上兩側邊距的總和，即整個柵格系統的總寬度 。
文章插圖
6. 容器盒子（Col-n）容器盒子（Col-n）是指布局信息的版面區域，通常設計師在設定好基礎柵格后，會根據實際情況去定義一塊內容需占用幾個列的寬度并形成容器，后續在設計過程中，會將文字、圖片、按鈕等元素約束在限定的容器寬度以內形成復用組件，最終組合拼裝成完整的設計方案 。
文章插圖
三、柵格系統制作流程1. 設計柵格寬度在設計Web端界面時設計師需要先根據實際使用場景確定好布局后，再來設定柵格區域，如下列布局：
文章插圖
屏幕寬度并不等于柵格的寬度，大多數情況下，我們會基于1920、1440這兩個尺寸來定義設計稿的寬度，但真正放置信息內容的區域并非設計稿尺寸，需要做到多平臺、多尺寸顯示器的適配，通常會將柵格寬度定義在1024px~1400px之間 。
例如：常見的1024px、1200px、1280px、1400px等，可滿足絕大多數主流顯示器，如果柵格寬度超過1400px，在很多筆記本電腦上瀏覽頁面時，會出現左右滾動條，體驗非常不友好 。
文章插圖
2. 選擇柵格列數1）12柵格
【部落沖突家鄉5本最強布陣 部落沖突5本最強布陣】12列柵格很常見，一些業務信息分組較少的商業網站、門戶網站等使用的就是12柵格，它能夠被2、3、4、6 整除，很容易滿足信息較為復雜的等分布局場景 。
另外，針對不對稱布局的容器組合也能將信息體現的很和諧，如雙欄布局使用4+8、3+9柵格，三欄布局使用2+8+2、3+3+6 柵格等，變化較為靈活 。
文章插圖
2）24柵格
24列柵格適合信息量大、分組多且多樣復雜的使用場景，很多視覺區域較大、需要精細化布局的B端Web設計采用的就是24柵格，相比12柵格，有更多的區域劃分空間，其布局的靈活性也更強 。
需要注意的是，24柵格因列的數量比較多，很多時候列寬無法被精準整除，不過相差的像素數值極小，往往無法被用戶肉眼覺察，無傷大雅 。柵格本身的目的就是為了保持視覺效果的協調與統一，并非為了死磕某個像素，特殊情況區別對待即可 。
文章插圖
3）5柵格
5列柵格一般用在移動端設計中，因設備屏幕的橫向空間有限，所以很少使用，例如：針對“金剛區”的5圖標（一行）、10圖標（兩行）的規范化排版 。如果想進一步追求后續的靈活性、避免奇數的不便，也可將5列柵格拆分成10列，布局、視覺效果基本能保持一致 。
其實在實際設計中，設計師們大多會使用間距來規范界面的排版與布局，相比5列柵格會更靈活、更便捷 。
文章插圖
3. 定義水槽與邊距水槽就是列的間隔，其定義方式可以延用間距系統的制定標準，以8px為最小單位進行推導，如S=8px、M=16px、L=24px、XL=32px、XXL=40px、…等，這樣更容易保持視覺的一致性，最終到底使用哪個值沒有絕對的要求，這還需要根據產品的調性及設計風格來決定，水槽的數值越大，頁面的留白間隙就越多 。
推薦閱讀
- 形容家鄉的美好朋友圈句子 形容三月美好的朋友圈句子文案
- 感恩家鄉贊美家鄉的經典語錄
- 家鄉的風俗元宵節作文 家鄉的元宵節作文5篇
- 部落沖突9本部落戰戰術有哪些 部落沖突9本部落戰怎么打
- 清朝狀元林紹棠的家鄉在哪里 清朝狀元林紹棠介紹
- 2021八本最強防御陣圖 部落沖突8本最強布陣
- 如果工作和學習相沖突該怎么選擇 學業和工作沖突怎么回答
- 招聘14薪相當于年終獎嗎 14薪和年終獎沖突嗎
- 部落沖突六本最強陣是什么 部落沖突六本最強陣形
- CMS 偽靜態順序沖突解決方案