想必大家经常都用到Grid 栅格系统来实现分栏布局，比如BootStrap这种常用的前端UI库中，分栏布局是最常见的功能。假如不想用BootStrap这类整套解决方案的话，也可以自己实现，正巧最近在实现这块，所以随手记一下。
分栏布局实例
基于flex的分栏布局
在面对现代浏览器的时候，利用display: flex 是一个很好的解决方案。为何要用flexible box 布局，因为现在主流的浏览器基本都已经支持这个CSS 属性(除了IE9 及以下的浏览器)，并且可以实现灵活的布局调整。
One Grid
Two Grids
Two Grids
Two Grids
.wrapper {
display: flex; /* flex布局默认情况下子元素的高度会填充满父元素 */
margin-top: 10px;
}
[class*='tile-'] {
padding: 10px;
box-sizing: border-box;
background: lightgrey;
border: 1px solid red;
}
.tile-1-1 {
width:100%;
}
.tile-1-2 {
width:50%;
margin-right: 10px;
}
.tile-1-2:last-child {
margin-right: 0;
}
flex 布局实例
从上图可以看出，虽然第二排的两个元素内容不一样多，但是高度依然一致地填满了父元素，这一点对于带背景色的Grid布局很方便。而且想要实现内容居中也很方便，只需要设定父元素的align-items和justify-content 两个属性为center 即可。
基于Table 的分栏布局
flex布局最大的问题就是不支持IE9，那么为了浏览器版本兼容可以用table标签来定义分栏或者设定块级元素的display属性为 table，table-row，table-cell等来模拟table 标签的布局效果。一般来说，将想要并列布局的子元素设为table-cell，父元素设定为table 就可以实现
.wrapper {
width: 100%;
display: table;
border-collapse: separate;
border-spacing: 12px 6px; /* 对父元素设置水平和垂直方向的spacing 来设定table-cell边界之间的空隙
*/
}
.offsetL {
margin-left: -12px; /*通过设定负 margin 把整个布局贴齐左边，因为border-spacing造成了空隙*/
}
.tile-1-2 {
display: table-cell;
width: 50%;
padding: 10px; /* 子元素边界和内容间的空隙 */
// box-sizing: border-box;
background: lightgrey;
border: 1px solid red;
}
.tile-1-1 {
width: 100%;
border: 1px solid red;
box-sizing: border-box;
padding: 10px;
background: lightgrey;
}
以上知识点虽然很简单。。但真是 用的时候方恨少。flex 布局其实总共也就12个属性，具体可以参考 阮一峰的博客，很生动详细。
