简单了解十二栅格

　　十二栅格是一种响应式布局方式，它的大体思想是，将父元素的宽度等性的分成12栏，利用 @media 去给每一个元素在不同屏幕下设置为占据不同栏数宽度，例如，某个元素，在大屏是占整个父元素的3栏（一行有4个相同元素），在中屏占整个父元素的6栏（一行有2个相同元素），在小屏占整个父元素的12栏（独占一行）。

      下面是我模仿bootstrap自己写的一个简易十二栅格系统：

.container{
  display: block;
  height: auto;
  margin: 0 auto;
}

.container-fliud{
  width: 100%;
  display: block;
  height: auto;
}

.row:after {
  content: " ";
  display: block;
  clear: both;
}

.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,
.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {
  display: block;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,
.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11 
{
  float: left;
}

/*超小屏幕 手机*/
@media screen and (max- 768px){
  .col-xs-1 {  width: 8.333333%;}
  .col-xs-2 {  width: 16.666667%;}
  .col-xs-3 {  width: 25%;}
  .col-xs-4 {  width: 33.333333%;}
  .col-xs-5 {  width: 41.666667%;}
  .col-xs-6 {  width: 50%;}
  .col-xs-7 {  width: 58.333333%;}
  .col-xs-8 {  width: 66.666667%;}
  .col-xs-9 {  width: 75%;}
  .col-xs-10 {  width: 83.333333%;}
  .col-xs-11 {  width: 91.666667%;}
  .col-xs-12 {  width: 100%;}
  .col-xs-hidden {  display: none;}
}

/*屏幕大于768 平板*/
@media screen and  (min- 768px) and (max- 992px) {
  .container {  max-width: 750px;}
  .col-sm-1 {  width: 8.333333%;}
  .col-sm-2 {  width: 16.666667%;}
  .col-sm-3 {  width: 25%;}
  .col-sm-4 {  width: 33.333333%;}
  .col-sm-5 {  width: 41.666667%;}
  .col-sm-6 {  width: 50%;}
  .col-sm-7 {  width: 58.333333%;}
  .col-sm-8 {  width: 66.666667%;}
  .col-sm-9 {  width: 75%;}
  .col-sm-10 {  width: 83.333333%;}
  .col-sm-11 {  width: 91.666667%;}
  .col-sm-12 {  width: 100%;}
  .col-sm-hidden {  display: none;}
}

/*屏幕大于992 桌面*/
@media screen and  (min- 992px) and (max- 1200px){
  .container {  max-width: 970px;}
  .col-md-1 {  width: 8.333333%;}
  .col-md-2 {  width: 16.666667%;}
  .col-md-3 {  width: 25%;}
  .col-md-4 {  width: 33.333333%;}
  .col-md-5 {  width: 41.666667%;}
  .col-md-6 {  width: 50%;}
  .col-md-7 {  width: 58.333333%;}
  .col-md-8 {  width: 66.666667%;}
  .col-md-9 {  width: 75%;}
  .col-md-10 {  width: 83.333333%;}
  .col-md-11 {  width: 91.666667%;}
  .col-md-12 {  width: 100%;}
  .col-md-hidden {  display: none;}
}

/*屏幕大于1200 大桌面*/
@media screen and (min- 1200px) {
  .container {  max-width: 1170px;}
  .col-lg-1 {  width: 8.333333%;}
  .col-lg-2 {  width: 16.666667%;}
  .col-lg-3 {  width: 25%;}
  .col-lg-4 {  width: 33.333333%;}
  .col-lg-5 {  width: 41.666667%;}
  .col-lg-6 {  width: 50%;}
  .col-lg-7 {  width: 58.333333%;}
  .col-lg-8 {  width: 66.666667%;}
  .col-lg-9 {  width: 75%;}
  .col-lg-10 {  width: 83.333333%;}
  .col-lg-11 {  width: 91.666667%;}
  .col-lg-12 {  width: 100%;}
  .col-lg-hidden {  display: none;}
}