什么是柵格系統？柵格系統怎么應用，如何制定柵格系統
柵格系統簡單來說，柵格就是格子。它并沒有多高深復雜，可以把他想象成一個個的格子組合起來，就很容易理解了，比如我們小時候用過的方格本，以及現在流行的像素本。所以柵格就是利用網格進行分類排版，由網格演變而來的另一種說法。使用柵格系統，能讓你的設計具有正式感和規范感，還具有一種結構分明的設計感。那么柵格系統在設計中的運用必須遵循什么準則？柵格系統使用方法是什么？
柵格系統的應用準則
1.柵格系統的核心思想是：內容元素必須位于若干列上，可以任意分割，比如 6×2、3×4、4×3。
2.水槽內禁止放任何內容元素，內容元素應該要在列寬以內，而不能流出在水槽之外，這樣會違背柵格化的目的。
3.父級元素對齊柵格，子級可以不完全對齊列
4.除非特意設計，否則不要在列之外區域放置元素
所有重要的內容都應該與總寬度相適應，有時候也不能把總寬度當作全部內容區域，還需給它設定一個內邊距，此時它就充當起了留白的作用。不要在網格內部利用列寬當成內邊距，而是要與網格最邊緣保持對齊，利用網格外部的間距來當作留白區域。
柵格系統使用方法
柵格系統最主要的是學會如何在 UI 設計工作中去使用這套方法。在實際項目中去實操練習，熟練應用。
1.布局
根據需要，使用不同數量的欄，去排列組和我們想要的布局樣式。以 6 欄為例，簡單列了幾種組合方式。如 1 排 1，1 排 2，1 排 3…,欄數越多，組合方式就越多，在設計中我們可以把常用的組合方式排列出來，后續設計中可以直接拿出來用，大大提升設計效率。
2.定義有意義的間距
柵格系統更多的解決了頁面的基本骨架。但是頁面元素之間的間距也需要我們有規律有節奏的去定義。比如我們的留白間距規則。很多設計師設置的數值都是一些無效數值，比如 4，8，12…這些間距之間的差異是很小的，讓人很難看出組與組之間的親密關系。所以！！一套有意義的間距數值是很有必要的。一般數值的設定為 XS、S、M、L、XXL 這五個數值，也就是最小間距、小間距、常規間距、較大間距、最大間距。就像我們買鞋子一樣，就固定住了這幾個尺寸，設計中的間距也一樣，這樣能讓組與組之間區分更明顯。讓留白更有意義。同時也能讓設計師們更加有默契，減少對基礎間距設置的思考。
3.靈活使用欄與水槽
很多同學在剛學習柵格系統時，會讓自己的設計元素，比如文字、圖標去對齊、卡死欄目的邊緣。這種使用方法是錯誤的。因為欄只是內容的承載容器，我們的設計元素在這個容器里的擺放是多樣化的。我們需要去靈活使用，而不是非要讓所有元素對齊在同一豎線上！！！！
柵格系統的使用一定要在平時多研究，多實操。我們可以找一些好多產品比如淘寶、支付寶、愛彼迎、pinterest 等產品的界面去研究他們的柵格系統，然后靈活的應用到自己的設計中。柵格系統看似簡單，其實在剛開始學習的過程中一定會遇到很多困惑與挑戰，只要我們堅持做下去，多練習就一定會掌握的。
柵格系統 是運用固定的格子設計版面布局，其風格工整簡潔，在二戰后大受歡迎，已成為今日出版物設計的主流風格之一。因為規律高效的適配的特性，柵格系統被逐漸應用到網頁設計中。那如何制定柵格系統呢？
什么是柵格系統
網頁柵格系統是從平面柵格系統中發展而來，網頁柵格以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。合理的柵格系統可以通過調整布局網格以滿足產品和各種設備尺寸的需求。
如何制定柵格系統
1. 選擇畫布尺寸
目前 PC 端主流的設備尺寸是 1920X1080、1366X768、1440X900、1280X720、1024X768，其中占比最大的設備尺寸為 1920X1080。
如果將較大的屏幕尺寸定義為基礎的設計尺寸，雖然可以在設計稿中呈現更多的內容，但向較小屏幕尺寸適配時會出現顯示不完整的情況。因此我們建議以較小的屏幕尺寸為設計尺寸，同時向大尺寸進行適配。
對于 SaaS 類產品而言，其用戶設備比較廣泛，可以選擇 Ant Design 推薦的設計尺寸 1440X900（近些年來隨著屏幕尺寸的增加，Ant Design 也將設計尺寸改為 1440X900，同時主字號調整為 14PX ）。
2. 確定柵格區域
將頁面按照功能模塊劃分為全局控制區、內容區、背景區、彈層區。通常我們對內容區域進行柵格化。Web 端的布局通常包括上下布局、左右布局、T 字形布局。建議按照業務場景的不同靈活地選擇布局形式。
3. 網格設置
現在主流的網格單元的尺寸為 8 PX， 如 Ant design、Zan design、Arco.design 均選擇 8PX 作為最小的網格尺寸。因為目前主流的顯示屏橫向和豎向都可以被 8 整除，可以做到完美適配。但所有的設計都不是絕對的，我們在選擇最小的柵格單元時，也可以根據業務需要選擇 4PX 作為最小的網格單位。
4. 柵格計算
PC 端常見的柵格有 12 柵格和 24 柵格，柵格分的數量越多可以承載更復雜的內容結構，展示更詳細的信息。國內較為主流的企業級設計系統 Ant Design、Element 均采用 24 柵格。
12 柵格：將頁面分為 12 份，在流行的前端開發工具庫 Bootstrap 與 Foundation 中廣泛使用，適用于業務信息分組較少，單個盒子內信息體積較大的中后臺頁面設計。
24 柵格：將頁面分為 24 份，變化更加靈活，適用于業務信息量大場景復雜的后臺產品。
通常我們看到的各家系統對于柵格的名詞各有不同，新手往往會迷失在這些名詞中，其實雖然名詞略有不同，但總體表達的意義和劃分原則是一致的，大可不必在這些名詞中糾結，這里我們對名詞作一些解釋。
注意事項
1. 盡量保證偶數思維
盡量保證偶數思維，所有的數值保持偶數思維，可以在放大縮小時保證頁面不失真。
2. 字段元素的起始點必須落在 column 上
字段元素必須要落在 column 上，不要將字段元素的起始點落在水渠中。這樣就違背了柵格的目的。
如何構建一套 B 端柵格體系？我總結了五個方面！
3. 可以讓父級容器對齊柵格，子元素可以不落在柵格上
很多時候我們發現如果一味的將元素與柵格對齊，可能會導致我們設計美觀度降低。這時候我們需要把整個元素想象成為一個更大容器，運用盒子的原理，只需要把父級元素和柵格對齊即可。
