制作简约CSS栅栏布局
众所周知，Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着显示屏幕或视口的改变，自动改变相应的布局。
作者在前段时间用过bootstrap框架，印象最深刻，使用最频繁的便是这栅栏布局，但如果仅仅是为了使用这个栅栏布局就引入一个框架，这明显是非常不明智的，所以便根据bootstrap框架做了一个简约的栅栏布局。
栅栏系统的组成：
1.container 包裹栅栏的容器
2.row 行
3.column 列
首先，这个栅栏系统需要一个总的容器，这样column（列）才能用百分比设置宽高。
.container{
width:100%;
max-width:1366px;
padding:015px;
}
这里为容器（container）添加一个左右padding，是为了防止内容碰触浏览器边缘。
接下来是行（row）
行元素用于防止里面的列（ column ）溢出到其他的行，接下来的列（column）将会使用浮动布局，所以在row中要清楚浮动，这里，我们采用伪类里添加clear：both
.row:before,.
row:after{
content:" ";
display:table;
clear:both;
}
.row{margin:0-15px;}
为row（行）添加margin-left：-15px 和 margin-right：-15px 用来抵消container中的padding，使background、border等属性可以覆盖到浏览器边缘。
最后是列（column）
我们先为列设置最基本的样式
[class*='col-']{
position:relative;
float:left;
min-height:1px;
padding:0 15px;
}
这里我们把一行（row）分成12列，通过简单的计算就可得出每行的宽度：
.col-12{
width:100%;
}
.col-11{
width:91.66666667%;
}
.col-10{
width:83.33333333%;
}
.col-9{
width:75%;
}
.col-8{
width:66.66666667%;
}
.col-7{
width:58.33333333%;
}
.col-6{
width:50%;
}
.col-5{
width:41.66666667%;
}
.col-4{
width:33.33333333%;
}
.col-3{
width:25%;
}
.col-2{
width:16.66666667%;
}
.col-1{
width:8.33333333%;
}
由于列（column）的宽度单位为响应式的%，我们又设有左右padding，所以为了防止复杂的计算，我们把container中的所有元素都设：box-sizing: border-box;
.container*{
box-sizing:border-box;
}
这样就可以避免一次次的加减，避免宽度过大而换行的问题了。
为列设置偏移量
.col-offset-12 {
margin-left: 100%;
}
.col-offset-11 {
margin-left: 91.66666667%;
}
.col-offset-10 {
margin-left: 83.33333333%;
}
之后代码以此类推。
这样，一个栅栏系统就完成了！可以写一个简单的样例进行测试。
研究了半天，不知道怎么放HTML代码...大家自己测验下吧~
最后，为栅栏系统设置响应式布局
响应式布局是利用HTML5的media查询来查询屏幕宽度，进而进行CSS的修改。
这里，当我们的屏幕宽度小于960px时，我们采用两倍列的宽度，即两列变一列：
@mediaall and (max-width:960px){
.col-12{
width:100%;
}
.col-11{
width:100%;
}
.col-10{
width:100%;
}
.col-9{
width:100%;
}
.col-8{
width:100%;
}
.col-7{
width:100%;
}
.col-6{
width:100%;
}
.col-5{
width:83.33333333%;
}
.col-4{
width:66.66666667%;
}
.col-3{
width:50%;
}
.col-2{
width:33.33333333%;
}
.col-1{width:16.66666667%;}
这样，一个基本的栅栏系统就完成了，当然你还可以根据媒体查询，查询屏幕宽度小于640，320等，这些就不再重复累赘。
