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這里就是容器的定義,默認的width1200px,如果想修改容器的默認寬度,你可以重新定義。
.container-fluidwidth100%


  • 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
<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  網格系統*/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%;}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,330評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • Bootstrap是什么? 一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,918評論 3 184
  • 原文出處 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端進階之旅閱讀 7,118評論 0 42