1. 需求背景
之前項目使用bootstrap奢方，可是使用后發(fā)現(xiàn)bootstrap太臃腫，我想要的自身一個網(wǎng)格布局而已爸舒，特別是默認再帶的padding各個瀏覽器下導(dǎo)致的bug蟋字，迫使我去寫一個自己的CSS網(wǎng)格系統(tǒng)。取名onlygrid.css
onlygrid.css參照了bootstrap網(wǎng)格系統(tǒng)碳抄、960網(wǎng)格系統(tǒng)的特點進行編寫愉老，是一個純粹的網(wǎng)格系統(tǒng)，壓縮后的大小之后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列的網(wǎng)格方式：
.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
<link rel="stylesheet" href="/extends/onlygrid.css">
2.使用
<div class="container-12">
<div class="r warpper">
<a >百度</a>
<a >360</a>
</div>
<div class="r">
<div class="c-4 c-move-right-1">1</div>
<div class="c-4">2</div>
<div class="c-4">3</div>
</div>
</div>
源碼
/*only grid 網(wǎng)格系統(tǒng)*/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列內(nèi)容為空的時候，列被忽略的問題*/ 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欢瞪，這會導(dǎo)致同一行內(nèi)的列也可能會移動活烙，這里的偏移和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%;}
