宫格布局
宫格布局是结合栅格系统实现的一种布局方式
aui-grid 宫格容器
<section class="aui-grid aui-margin-b-15"> <div class="aui-row"> <div class="aui-col-xs-4"> <div class="aui-badge">88</div> <i class="aui-iconfont aui-icon-home"></i> <div class="aui-grid-label">首页</div> </div> <div class="aui-col-xs-4"> <i class="aui-iconfont aui-icon-gear"></i> <div class="aui-grid-label">设置</div> </div> <div class="aui-col-xs-4"> <i class="aui-iconfont aui-icon-map"></i> <div class="aui-grid-label">地图</div> </div> <div class="aui-col-xs-4"> <i class="aui-iconfont aui-icon-calendar"></i> <div class="aui-grid-label">日历</div> </div> <div class="aui-col-xs-4"> <div class="aui-badge"></div> <i class="aui-iconfont aui-icon-date"></i> <div class="aui-grid-label">日期</div> </div> <div class="aui-col-xs-4"> <div class="aui-dot"></div> <i class="aui-iconfont aui-icon-cart"></i> <div class="aui-grid-label">购物车</div> </div> </div> </section> <section class="aui-grid"> <div class="aui-row"> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-home"></i> <div class="aui-grid-label">首页</div> </div> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-gear"></i> <div class="aui-grid-label">设置</div> </div> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-map"></i> <div class="aui-grid-label">地图</div> </div> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-calendar"></i> <div class="aui-grid-label">日历</div> </div> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-date"></i> <div class="aui-grid-label">日期</div> </div> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-cart"></i> <div class="aui-grid-label">购物车</div> </div> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-paper"></i> <div class="aui-grid-label">发现</div> </div> <div class="aui-col-xs-3"> <i class="aui-iconfont aui-icon-video"></i> <div class="aui-grid-label">视频</div> </div> </div> </section>