檢驗前端的一個基本功就是考查他的布局。很久之前聖杯布局風靡一時，這裡就由聖杯布局開始，到最流行的bootstrap栅格布局。
聖杯布局
聖杯布局是一種三列布局，兩邊定寬，中間自适應：
聖杯布局的原理就是當子元素處于浮動狀态時，設定負margin，子元素會疊蓋到兄弟元素之上。
那麼能否用現在想要将其中藍色區域再次劃分成三個區域，相信有很多種辦法。但能否通過嵌套的方式實作呢？我們可以試一下：
可以看到藍色區域已被劃分成三個區域。這個過程是不是很像bootstrap中的栅格嵌套？誠然，利用聖杯布局我們可以實作一套簡單的栅格系統，詳情請看這篇文章：
栅格系統的原理
假設：flowline的寬度為w，column的寬度為c，gutter的寬度為g，margin的寬度為m，栅格列數為n
w = c*n + g*(n-1) + 2m；g的寬度通常為m的兩倍，是以：
w = (c+g) * n；把c+g記為c，得：
w = c * n;
大部分的栅格系統都是此公式的變體。
bootstrap的栅格系統
下面我們将一起來看一下常見的栅格布局的設計和bootstrap中的設計實作。bootstrap中合理的使用栅格布局，必須将列放入row中，而row必須放入container中。container類在布局中主要有兩個作用：
在不同的寬度區間内（響應式斷點）提供寬度限制。當寬度變化時，采用不同的寬度。
提供一個padding，阻止内部内容觸碰到浏覽器邊界。
bootstrap中使用padding代替上文中的margin。大小為15px，如下圖所示，粉紅色為padding大小。
row是column的容器，每個row中的column之和必須為12，不過我們可以通過嵌套的方式擴充。row的左右margin都為-15px，用來抵消container中的padding，如下圖藍色部分所示：
row的這種設計主要為了友善嵌套，後文中會提到。
colomn是栅格系統的主角，每個column左右padding都為15px，上文中row的負margin抵消了container的padding，是以為每個column設定padding就是為了防止内容直接觸碰邊界，同時不同的column之間擁有30px的卡槽（gutter）。如下圖黃色部分所示：
現在想想上文中提到的公式：w = c * n;
上文提到row的負margin設計主要為了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作為容器的column中，而不需要在放置一個container。如下圖中藍色所示，是放入column中的row的負margin區域。
現在将被嵌套的column放入row中，如下圖所示，上層column便是起到了container的作用。
如此我們便看到了bootstrap栅格系統的精妙所在。
參考文章：
<a href="http://www.poluoluo.com/jzxy/200810/49101.html">大型網站網頁栅格化将是潮流和趨勢</a>
<a href="http://ued.taobao.org/blog/2008/09/grid_systems/" target="_blank">網頁的栅格系統設計</a>
<a href="http://www.helloerik.com/bootstrap-3-grid-introduction" target="_blank">bootstrap 3 grid introduction</a>
<a href="http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works" target="_blank">the subtle magic behind why the bootstrap 3 grid works</a>