01、柵格系統(tǒng)的形成
  柵格系統(tǒng)（Grid system）最早使用在17世紀末的法國印刷業(yè)，出版業(yè)。
  維基百科對其定義為：柵格設(shè)計系統(tǒng)（又稱網(wǎng)格設(shè)計系統(tǒng)、標準尺寸系統(tǒng)、程序版面設(shè)計、瑞士平面設(shè)計風格、國際主義平面設(shè)計風格），是一種平面設(shè)計的方法與風格。
  網(wǎng)頁柵格系統(tǒng)是有平面柵格系統(tǒng)中發(fā)展而來，以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。
  02、柵格系統(tǒng)的原理
  柵格系統(tǒng)可以按柵格數(shù)分為12列，16列，24列等，可以自由設(shè)計柵格寬度和柵格與柵格間寬度。如下圖所示，記頁面或區(qū)塊寬度為W，A代表一個柵格單元的寬度，a代表一個柵格的寬度，i為柵格與柵格之間的距離，n為正整數(shù)，則有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
  03、經(jīng)典960柵格
  設(shè)計師們偏愛用蘋果系統(tǒng)做設(shè)計，蘋果下瀏覽器的默認寬度為960px, 在 1024 x 768 的分辨率下，我們再打開Firefox，自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣出現(xiàn)了。960只是個符號，并不是標準數(shù)。
  04、使用柵格系統(tǒng)的優(yōu)勢
  對于設(shè)計師來說，柵格系統(tǒng)更多的是一種布局思想，可以更有邏輯地進行設(shè)計工作。靈活地運用柵格系統(tǒng)，不僅可以讓整個網(wǎng)站各個頁面的布局保持一致，讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，讓設(shè)計稿有更好的結(jié)構(gòu)，更可以通過匹配不同組合，做出很多優(yōu)秀和獨特的排版設(shè)計。
  使用網(wǎng)格系統(tǒng)，可以使網(wǎng)頁設(shè)計給用戶正式感和規(guī)范感，還具有一種結(jié)構(gòu)分明的設(shè)計感，提升用戶體驗。網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩，一味按照網(wǎng)格線來進行布局。網(wǎng)格系統(tǒng)的意義在于更靈活的幫助設(shè)計師有序布局，而不是限制設(shè)計師的設(shè)計。
  對于前端開發(fā)人員來說，柵格系統(tǒng)的使用，給整個網(wǎng)站的頁面結(jié)構(gòu)定義了一個標準，大大提高了網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的，可重用的，這對于大型網(wǎng)站的開發(fā)和維護來說，能節(jié)約不少成本。
  隨著響應(yīng)式設(shè)計的流行，柵格系統(tǒng)開始被賦予新的意義，那就是，一種響應(yīng)式設(shè)計的實現(xiàn)方式。響應(yīng)式的要點是為同一個頁面設(shè)計多種布局形態(tài)，分別適配不同屏幕尺寸的設(shè)備。