說到柵格系統（grid system），你也許見過這樣的概念：

像這樣，通過固定的格子結構，來進行布局設計。這是一種設計風格，而且一直以來很廣泛地應用于網頁設計領域。這樣的風格清晰、工整，可以讓網頁具有更友好的瀏覽體驗。

而隨著響應式設計（responsive design）的流行，柵格系統開始被賦予新的意義，那就是，一種響應式設計的實現方式。
柵格與響應式

響應式的要點是為同一個頁面設計多種布局形態，分別適配不同屏幕尺寸的設備。一般來說，是這樣的感覺：

可以看到，一個頁面可以拆分成多個區塊來理解，而正是這些區塊共同構成了這個頁面的布局。根據不同的屏幕尺寸情況，調整這些區塊的排版，就可以實現響應式設計。另外，屏幕寬度較大的時候，區塊傾向于水平分布，而屏幕寬度較小的時候，區塊傾向于豎直堆疊。

這些方方正正的區塊是不是和柵格系統的格子挺相似？對的，為了讓響應式設計更簡單易用，于是有了很多稱為“柵格”（grid）的樣式庫。

柵格樣式庫一般是這樣做的：將頁面劃分為若干等寬的列（column），然后推薦你通過等寬列來創建響應式的頁面區塊。

雖然看起來都是這樣的思路，但不同的柵格樣式庫，在做法上卻是各有各的點子。下面，本文將介紹幾個比較有代表性的柵格樣式庫，講述它們的簡要原理和用法（正確的打開方式）。
Bootstrap中的柵格

Bootstrap把它的柵格放在CSS這個分類下，并稱它為Gird system。默認分為12列。
容器、行與列

要理解Bootstrap中的柵格，最好從掌握正確的使用方法開始。這其中有2個要點。

第1個要點是容器（container），行（row）和列（column）之間的層級關系。一個正確的寫法示例如下：