柵格化設計

柵格設計系統，是一種螢幕設計的方法與風格，運用固定的格仔設計版面布局，其風格工整簡潔。網頁柵格系統從平面柵格系統中發展而來，對於網頁設計而言，柵格系統的應用，不僅可以讓網頁的資訊呈現更加美觀易讀，更具可用性。

下面我們看乙個例項：

其html如下：

其css樣式如下：

在此例項中，dom元素類名形如col-md-4，其中col是列column的縮寫，md是medium的縮寫，適用於螢幕寬度大於768px的場景，4是佔四欄的意思。因此，col-md-4是意思是在螢幕大於768px時，該元素佔四欄。

柵格化網頁實現了網頁的響應式設計，其優勢在於：

①可大大提高網頁的規範性。在柵格系統下，頁面中所有元件的尺寸都是有規律的，這樣對於大型**的開發和維護來說，可節約不少成本。

②基於柵格化進行設計，可以讓整個網頁各個頁面的布局保持一致，這增加頁面的相似度，提公升使用者體驗。

③柵格系統更多的是一種布局思想，對於設計師們來說，靈活的運用柵格系統，可做出很多優秀和獨特的設計。