一 grid(栅格)

官方文档(grid) http://dev.dcloud.net.cn/mui/ui/#grid

MUI 提供了非常简单实用的 12 列响应式栅格系统，将每一行宽度平均分为12份，每一份作为一个子栅格，每一行的内容置于.mui-row行容器中。使用时只需在外围容器上添加 .mui-row ，在列上添加 .mui-col-[sm|xs]-[1-12] 将行分成若干行。

通过给每一行中的列设置1~12的数值，相应列的宽度会随着.mui-row像素宽度变化。若一行中列的数值和大于12，多余的列所在元素会作为一个整体另起一行排列。

栅格参数:

尺寸 超小屏幕(<400px)(Extrasmall) 小屏幕(≥400px) Small
类前缀 .mui-col-xs-[1-12] .mui-col-sm-[1-12]
列（column）数 12
可嵌套 是

使用以下媒体查询（media query）将.mui-row像素宽度400px作为分界，.mui-row 像素宽度低于400px的使用 .mui-col-xs-* ，当 .mui-row 像素宽度高于400px使用 .mui-col-sm-* 。.mui-row 宽度若不设置，默认为屏幕像素宽度。

  1. <div class="mui-row">
  2.     <div class="mui-col-xs-4 mui-col-sm-3">
  3.         .mui-col-sm-3
  4.     </div>
  5.     <div class="mui-col-xs-8 mui-col-sm-9">
  6.         .mui-col-sm-9
  7.     </div>
  8. </div>

这样我们得到了两列元素，当 .mui-row 像素宽度低于400px时，左侧宽度为4份子栅格宽度，右侧宽度为8份子栅格宽度；当 .mui-row 像素宽度高于400px时，左侧宽度为3份子栅格宽度，右侧宽度为9份子栅格宽度。

注意事项：
1.可以通过为列设置padding 属性，从而创建列与列之间的间隔；为指定列添加的 padding 会占用该列元素的空间（宽度）。如下示例代码，padding-right占用左侧元素(原本定义的整个宽度的50%)的20px宽度。

  1. <div class="mui-content">
  2.     <div class="mui-row">
  3.         <div class="mui-col-sm-6" style="padding-right: 20px;">
  5.         </div>
  6.         <div class="mui-col-sm-6">
  8.         </div>
  9.     </div>
  10. </div>

二 9宫格

默认实现 http://www.dcloud.io/hellomui/examples/grid-default.html

可滑动9宫格 http://www.dcloud.io/hellomui/examples/grid-pagination.html

9宫格是mui栅格系统的一种应用实例。