九宫格
在水平和垂直方向，将布局切分成若干等大的区块。
规则
- 区块中的内容应该是同类元素，eg：都是图片，或者都是图标+文字。
代码演示
九宫格
默认
操作
操作
操作
操作
操作
操作
操作
操作
操作
无边框线
操作
操作
操作
操作
操作
操作
操作
操作
一行三格与跑马灯
操作
操作
操作
操作
操作
操作
默认
默认一行四格有边框线
<div class="grid-wrapper">
<div class="grid-row">
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>无边框线
添加类grid-no-border可以得到无边框线的九宫格
<div class="grid-wrapper grid-no-border">
<div class="grid-row">
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
</div>
</div>一行三格与跑马灯
添加类grid-has-three可以得到一行三格的九宫格，可以和跑马灯结合使用
<div class="grid-wrapper grid-no-border grid-has-three">
<div class="grid-row">
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
<div class="grid-item" >
<div class="grid-item-inner" >
<div class="grid-icon icon-pic"></div>
<div class="grid-txt">操作 </div>
</div>
</div>
</div>
<div class="pagination-wrapper">
<div class="pagination-dot"></div>
<div class="pagination-dot pagination-dot-action"></div>
<div class="pagination-dot"></div>
</div>
</div>