栅格系统

栅格系统响应两种核心分辨率PC和手机，PC采用1170宽度（确保MAC下默认分辨率1280下正常显示的宽度）

/*  电脑大屏--lg*/
    .qui-wrapper{
    	width: 1170px;
    }
/* 电脑小屏--md */
@media screen and (max-width:1200px){
 .qui-wrapper{
    width: 970px;
  }
}
/* 平板--sm */
@media screen and (max-width:992px){
 .qui-wrapper{
    width: 750px;
  }
}
  /* 手机 xs*/
@media screen and (max-width:768px){
 .qui-wrapper{
    width: 100%;
  }
}

12栅格系统

默认12列的单元格栅格系统

栅格系统的基本写法

先写一行class="qui-row",行的里面写列（即格子系统）class="qui-col*" 1~12的罗马数字被作为了栅格系统的12列格子的命名。

<div class=".qui-row">
  <div class="qui-col5 ">
    <!--内容-->
  </div>
  <div class="qui-col8 ">
    <!--内容-->
  </div>
</div>

演示

10列栅格系统

增加一个qui-row10class="qui-row qui-row10"

<div class="qui-row qui-row10">
  <div class="qui-col5 ">
    <!--内容-->
  </div>
  <div class="qui-col5 ">
    <!--内容-->
  </div>
</div>

演示

利用10列删格系统平分5等份

填补空缺

可以通过 .fill*的写法让 qui-col12列栅格系统列发生偏移，例如 .qui-fill1将会让列往右偏移1个格子的宽度。

<div class=".qui-row">
  <div class="qui-col4 qui-fill1">
    <!--内容-->
  </div>
  <div class="qui-col4 ">
    <!--内容-->
  </div>
</div>

演示

多重嵌套

实现栅格系统的多重嵌套 嵌套依然先写一行class="qui-row"

<div class=".qui-row">
  <div class="qui-col6 ">
    <div class=".qui-row">
      <div class="qui-col6">
        <!--内容--> 
      </div>
      <div class="qui-col6">
        <!--内容--> 
      </div>
    </div>
  </div>
  <div class="qui-col6 ">
    <!--内容--> 
  </div>
</div>
  

演示

完整的栅格系统演示

移动端栅格

为了满足移动端布局更加灵活，新增了移动版栅格系统，此演示仅为抛石引玉，在实际应用中还有很多问题需要解决，我们期待与使用者一同探讨解决！ .qui-col5 qui-sm-*

<div class="qui-row ">
   <div class="qui-col1 qui-sm-col1">
     ...
  </div>
  <div class="qui-col11 qui-sm-col11">
    ...
  </div>
</div>