CSS网格系统onlygrid.css

1. 需求背景

之前项目使用bootstrap，可是使用后发现bootstrap太臃肿，我想要的自身一个网格布局而已，特别是默认再带的padding各个浏览器下导致的bug，迫使我去写一个自己的CSS网格系统。取名onlygrid.css
onlygrid.css参照了bootstrap网格系统、960网格系统的特点进行编写，是一个纯粹的网格系统，压缩后的大小之后1KB左右，兼容IE6+。

压缩后的onlygrid.css

2. 模块介绍

• 容器

.container-12 {    
    display: block;
    width: 1200px; 
    margin-left: auto;
    margin-right: auto;
}
.container-fluid{
    display: block;
    width: 100%;
}

.container-12这里就是容器的定义，默认的width是1200px，如果想修改容器的默认宽度，你可以重新定义。
.container-fluid的width是100%

• 行
  width为父元素的100%

• 列
  采用12列的网格方式：
  .c-12 .c-11 .c-10 .c-9 .c-8 .c-7 .c-6 .c-5 .c-4 .c-3 .c-2 .c-1

• 列偏移
  允许列相对于默认位置偏移1到12列的位置，偏移的时候其他列布局不受到影响。

3.使用方法

1.引入onlygrid.css

2.使用

    
        
       百度
       360             
   
 
   

       
1
       
2
      
3
   
 

源码

/*only grid  网格系统*/html, body {    min-width: 1200px;}/*百分之百容器*/.container-auto {    width: 100%;}/*12列，16列容器*/.container-12 {    width: 1200px;    display: block;    margin-left: auto;    margin-right: auto;}.container-fluid{   display: block;    width: 100%;}/*行*/.r {    display: block;    width: 100%;    position: relative;    zoom: 1;}.r:after {    content: "";    display: block;    height: 0;    clear: both;}/*列*/.c-12, .c-11, .c-10, .c-9, .c-8, .c-7, .c-6, .c-5, .c-4, .c-3, .c-2, .c-1 {    /*解决float: left列内容为空的时候，列被忽略的问题*/    min-height: 1px;    float: left;}.c-12 {    width: 100%;}.c-11 {    width: 91.66666667%;}.c-10 {    width: 83.33333333%;}.c-9 {    width: 75%;}.c-8 {    width: 66.66666667%;}.c-7 {    width: 58.33333333%;}.c-6 {    width: 50%;}.c-5 {    width: 41.66666667%;}.c-4 {    width: 33.33333333%;}.c-3 {    width: 25%;}.c-2 {    width: 16.66666667%;}.c-1 {    width: 8.33333333%;}/*列偏移bootstrap的列偏移是采用magin-right和margin-left，这会导致同一行内的列也可能会移动，这里的偏移和bootstrap的列排序是一样的，采用相对定位进行偏移*/.c-move-right-12, .c-move-right-11, .c-move-right-10, .c-move-right-9, .c-move-right-8, .c-move-right-7, .c-move-right-6, .c-move-right-5, .c-move-right-4, .c-move-right-3, .c-move-right-2, .c-move-right-1 {    position: relative;}.c-move-right-12 {    left: 100%;}.c-move-right-11 {    left: 91.66666667%;}.c-move-right-10 {    left:  83.33333333%;}.c-move-right-9 {    left: 75%;}.c-move-right-8 {    left: 66.66666667%;}.c-move-right-7 {    left: 58.33333333%;}.c-move-right-6 {    left: 50%;}.c-move-right-5 {    left: 41.66666667%;}.c-move-right-4 {    left: 33.33333333%;}.c-move-right-3 {    left: 25%;}.c-move-right-2 {    left: 16.66666667%;}.c-move-right-1 {    left: 8.33333333%;}