制作简约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等，这些就不再重复累赘。