柵格系統的原理

      柵格系統可以按柵格數分為12列，16列，24列等，可以自由設計柵格寬度和柵格與柵格間寬度。如下圖所示，記頁面或區塊寬度為W，A代表一個柵格單元的寬度，a代表一個柵格的寬度，i為柵格與柵格之間的距離，n為正整數，則有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。

經典960柵格

      設計師們偏愛用蘋果系統做設計，蘋果下瀏覽器的默認寬度為960px, 在 1024 x 768 的分辨率下，我們再打開Firefox，自然狀態下，Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣出現了。960只是個符號，并不是標準數。

      目前絕大多數顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網頁柵格系統中的最佳寬度了，也許不久的將來，將會流行1440。

使用柵格系統的優勢

      對于設計師來說，柵格系統更多的是一種布局思想，可以更有邏輯地進行設計工作。靈活地運用柵格系統，不僅可以讓整個網站各個頁面的布局保持一致，讓網頁的信息呈現更加美觀易讀，讓設計稿有更好的結構，更可以通過匹配不同組合，做出很多優秀和獨特的排版設計。

      使用網格系統，可以使網頁設計給用戶正式感和規范感，還具有一種結構分明的設計感，提升用戶體驗。網格系統不意味著循規蹈矩，一味按照網格線來進行布局。網格系統的意義在于更靈活的幫助設計師有序布局，而不是限制設計師的設計。

      對于前端開發人員來說，柵格系統的使用，給整個網站的頁面結構定義了一個標準，大大提高了網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的，可重用的，這對于大型網站的開發和維護來說，能節約不少成本。

隨著響應式設計的流行，柵格系統開始被賦予新的意義，那就是，一種響應式設計的實現方式。響應式的要點是為同一個頁面設計多種布局形態，分別適配不同屏幕尺寸的設備。