（一）什麼是網格系統？
| 包含了水平和垂直方向的參考線，用來合理排列內容。
最基本的網格系統由一系列水平和垂直的交叉參考線構成。網格系統最開始在紙媒中廣泛應用，有著悠長的歷史，引入到網頁設計之後，出現了很多CSS網格框架，幾乎成了網頁設計的標準。利用網格系統可以更好的駕馭內容，保持一致性。也是響應式網頁表現的方法之一。
下面我們來看圖（一）為響應式網站在不同終端的顯示效果，顯示終端為不同的顯示器，各種手機（包括橫版豎版）都需要很好適配做好用戶體驗。
圖一
當然你也可以打破網格系統，用更好的佈局取而代之，也可從網格系統中衍生出自己的佈局方式。如果你的網站設計的已經很不錯，那麼可以通過網格來讓你的網站更具有體驗價值。但網格系統不意味著循規蹈矩，一味按照網格線來進行佈局。就拿響應式設計來說，靈活性是其最大的特點網格系統也應如此，網格系統的意義在於更靈活的幫助你有序佈局，而不是限制你的設計。網上可以找到很多合適的網格框架，當然，我們也可以自己創造。但還有句老話說的好，規矩就是用來被打破的。無需拘泥於網格系統的形式，我們使用網格系統只是為了理解佈局的理念和手法，之後，我們便可以進行創新。
（二）如何建立網格系統？
網格系統的設定不同人有不同的習慣，有人喜歡12列的網格，有人則喜歡16列網格，還有人喜歡24列的網格等等。
為什麼老鐵喜歡運用12欄，網頁中最多的欄就是導航的劃分了，12欄已經可以滿足大多數的分欄了。我們可以先去看蘋果的官網響應式就做的很棒，以此來開啟我們的網格之旅！！！
圖一
那麼什麼樣的網格系統更適合我們呢？
我們要從實際的設計產出物（平面、網頁、APP）來考慮，就能夠知曉網格系統如何設定。
平面：尊重常用分欄進行劃分，尺寸可以有小數點但需要達到均衡感。
網頁：為了能夠符合工程師書寫代碼，請按2的倍數進行欄與間距的劃分，儘量不要出現奇數與小數點，小數點不好書寫，奇數不好對齊。
APP：為了適配不同手機能夠方便工程師開發，請按2的倍數（工程師尺寸設計效果圖）、4的倍數來劃分（按2倍手機設計效果圖）、6的倍數來劃分（按3倍手機設計效果圖），以此為參考進行網格設定就真正意義上考慮到效果圖在手機上的還原度。
下面的圖解主要分析網頁與手機H5頁面的網格系統建立方法。我個人更喜歡12列的網格。需要參考整體的寬度來進行分割。如果設計上有比較多的小元素可以設置24列網格。以前網上下載到CSS樣式大多數都是960px的網格系統，這裡的960px就是頁面的可視區域。現在屏幕的分辨率都提高了，大多數網頁都基於1200px以內進行響應式設計適配不同的瀏覽器。下圖（二）、圖（三）為老鐵針對網頁的網格系統的劃分請童鞋參考，也可以自己重新定義屬於自己的網格系統（網頁的高度看你的內容多少了）版式中的banner（廣告）遵循廣告的設計規律，字體字號大小、字體顏色老鐵的其它文章都講解過了~~~
（三）網頁網格系統
圖二
圖三
圖（四）為網格系統參考線顯示、圖（五）為實際效果圖展示
圖四
圖五
網格系統有利於新手可以快速的進行頁面的佈局排版，使頁面更加規範整潔，對於剛轉行進行UI的小夥伴幫助還是很大的。
以上是關於網頁方向的網格系統佈局，關於APP（H5）的小編也會在下篇文章中整理出來分享給小夥伴們噢，如果文章對您有幫助的話，可以關注一下小編，小編也會不時推送關於設計的文章一起學習噢~
閱讀更多 設計資源推送 的文章
