宫格 Grid
使用 .aui-grids 做为外侧容器。使用 .aui-grid、.aui-col-xs-* 来实现宫格布局。.aui-col-xs-* 支持选项如下：
.aui-col-xs-11列.aui-col-xs-22列.aui-col-xs-33列.aui-col-xs-44列.aui-col-xs-55列.aui-col-xs-66列.aui-col-xs-77列.aui-col-xs-88列.aui-col-xs-99列.aui-col-xs-1010列.aui-col-xs-1111列.aui-col-xs-1212列
使用 .aui-grid-* 来实现宫格内部布局，详见示例：
示例代码
<div class="aui-content">
<div class="content-top">
Grid九宫格组件主要使用场景如：商品分类列表、商品推荐列表、热门内容等。
</div>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>
3列
</div>
<li class="aui-card-main" style="padding: 0;">
<!-- 九宫格组件 -->
<div class="aui-grids">
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon"><i class="iconfont iconindexlist" style="color: #05c091;"></i></div>
<div class="aui-grid-text">Index索引列表</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconnavbar" style="color: #fe2f24;"></i>
</div>
<div class="aui-grid-text">Navbar导航</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconnumberbox" style="font-size: 25px; color: #db639b;"></i>
</div>
<div class="aui-grid-text">Number输入框</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconnotice" style="font-size: 25px; color: #fe6503;"></i>
</div>
<div class="aui-grid-text">Notice通告栏</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconsearch" style="font-size: 22px; color: #197DE0;"></i>
</div>
<div class="aui-grid-text">Searchbar搜索</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconxing" style="font-size: 22px; color: #fec002;"></i>
</div>
<div class="aui-grid-text">Fav收藏按钮</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconclock" style="color: #EE0000;"></i>
</div>
<div class="aui-grid-text">Countdown倒计时</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconheadlines" style="color: #add51d;"></i>
</div>
<div class="aui-grid-text">Card卡片</div>
</div>
<div class="aui-grid aui-col-xs-3">
<div class="aui-grid-icon">
<i class="iconfont iconzhedie" style="color: #05c091;"></i>
</div>
<div class="aui-grid-text">Collapse折叠面板</div>
</div>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>
4列
</div>
<li class="aui-card-main" style="padding: 0;">
<!-- 九宫格组件 -->
<div class="aui-grids">
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconindexlist" style="color: #05c091;"></i>
</div>
<div class="aui-grid-text">Index索引列表</div>
</div>
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconnavbar" style="color: #fe2f24;"></i>
</div>
<div class="aui-grid-text">Navbar导航</div>
</div>
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconnumberbox" style="font-size: 25px; color: #db639b;"></i>
</div>
<div class="aui-grid-text">Number输入框</div>
</div>
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconnotice" style="font-size: 25px; color: #fe6503;"></i>
</div>
<div class="aui-grid-text">Notice通告栏</div>
</div>
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconsearch" style="font-size: 22px; color: #197DE0;"></i>
</div>
<div class="aui-grid-text">Searchbar搜索</div>
</div>
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconxing" style="font-size: 22px; color: #fec002;"></i>
</div>
<div class="aui-grid-text">Fav收藏按钮</div>
</div>
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconclock" style="color: #EE0000;"></i>
</div>
<div class="aui-grid-text">Countdown倒计时</div>
</div>
<div class="aui-grid aui-col-xs-4">
<div class="aui-grid-icon">
<i class="iconfont iconheadlines" style="color: #add51d;"></i>
</div>
<div class="aui-grid-text">Card卡片</div>
</div>
</div>
</li>
</ul>
</div>