1 、柵格系統的形成
柵格系統（Grid system）zui 早使用在 17 世紀末的法國印刷業，出版業。
維基百科對其定義為：柵格設計系統（又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。
網頁柵格系統是有平面柵格系統中發展而來，以規則的網格陣列來指導和規範網頁中的版面佈局以及資訊分佈。
2 、柵格系統的原理
柵格系統可以按柵格數分為 12 列，16 列，24 列等，可以自由設計柵格寬度和柵格與柵格間寬度。如下圖所示，記頁面或區塊寬度為 W，A 代表一個柵格單元的寬度，a 代表一個柵格的寬度，i 為柵格與柵格之間的距離，n 為正整數，則有 W=(a＊n)+(n-1)*i, 由於 A=a+i，可得（A＊n）-i=W 。
（A*n）-i = W 這個公式表述了網頁的佈局與網頁背後柵格系統之間的關係。
在柵格系統中，設計師根據需要指定不同的版式或者劃分割槽塊改變 A 和 i 的值進行設計，這樣，一個柵格系統的應用就從此開始了。
3 、經典 960 柵格
設計師們偏愛用蘋果系統做設計，蘋果下瀏覽器的預設寬度為 960px, 在 1024 x 768 的解析度下，我們再開啓 Firefox，自然狀態下，Firefox 窗體的大小約為 974 x 650. 減掉左右兩邊 7px 的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650. 有趣的 960 就這樣出現了。 960 只是個符號，並不是標準數。
共 26 種（26 = 7 * 2 * 2 – 2, 減去 2 是去掉 1 和 960 自身），我們標記為：
N(960) = N(2^6 * 3 * 5) = 26
根據上面的演算法，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30
N 越大，可組合的寬度值就越多。對柵格系統來説，這意味着越靈活。
目前絕大多數顯示器都支持 1024 x 768 及其以上解析度。為了有效的利用螢幕寬度同時保證柵格的靈活度，可以看出 960 是非常合適的。這樣，在目前主流顯示器下，960 就成為網頁柵格系統中的 zui 佳寬度了，也許不久的將來，將會流行 1440 。
4 、使用柵格系統的優勢
對於設計師來説，柵格系統更多的是一種佈局思想，可以更有邏輯地進行設計工作。靈活地運用柵格系統，不僅可以讓整個網站各個頁面的佈局保持一致，讓網頁的資訊呈現更加美觀易讀，讓設計稿有更好的結構，更可以通過匹配不同組合，做出很多優秀和獨特的排版設計。
使用網格系統，可以使網頁設計給多用户正式感和規範感，還具有一種結構分明的設計感，提升多用户體驗。網格系統不意味着循規蹈矩，一味按照網格線來進行佈局。網格系統的意義在於更靈活的幫助設計師有序佈局，而不是限制設計師的設計。
對於前端開發人員來説，柵格系統的使用，給整個網站的頁面結構定義了一個標準，大大提高了網頁的規範性。在柵格系統下，頁面中所有組件的尺寸都是有規律的，可重用的，這對於大型網站的開發和維護來説，能節約不少成本。
隨着響應式設計的流行，柵格系統開始被賦予新的意義，那就是，一種響應式設計的實現方式。響應式的要點是為同一個頁面設計多種佈局形態，分別適配不同螢幕尺寸的裝置。
可以看到，一個頁面可以拆分成多個區塊來理解，而正是這些區塊共同構成了這個頁面的佈局。根據不同的螢幕尺寸情況，調整這些區塊的排版，就可以實現響應式設計。而藉助柵格系統，設計與前端開發人員可以很容易的設計和建立響應式的頁面佈局。
柵格系統是一種格式化的設計工具，使用柵格系統是一種好的習慣，設計師可以更專注於內容呈遞，更專注於強調重點。當然，規矩是用來打破的，當我們理解了佈局的理念，掌握了柵格的手法之後，也無需拘泥於柵格的形式，可以對其 “革命”，進行創新。