检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的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>