宫格布局

宫格 .aui-grid 配合栅格系统 .aui-row、.aui-col-xs-* 可以快速完成宫格布局，如九宫格和十六宫格。

示例源码

<p class="aui-padded-10">九宫格</p>
<section class="aui-grid">
    <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 class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-grid-label">个人中心</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-paper"></i>
            <div class="aui-grid-label">发现</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-video"></i>
            <div class="aui-grid-label">视频</div>
        </div>
    </div>
</section>
<p class="aui-padded-10">十六宫格</p>
<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 class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-grid-label">个人中心</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-mail"></i>
            <div class="aui-grid-label">电子邮箱</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-location"></i>
            <div class="aui-grid-label">位置</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-menu"></i>
            <div class="aui-grid-label">菜单</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-lock"></i>
            <div class="aui-grid-label">密码锁</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-info"></i>
            <div class="aui-grid-label">详细信息</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-like"></i>
            <div class="aui-grid-label">喜欢</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-star"></i>
            <div class="aui-grid-label">关注</div>
        </div>
    </div>
</section>