九宫格、十六宫格

AUI里面定义了一套九宫格的样式,貌似现在大屏手机使用九宫格显得有些空虚,就顺便弄了个十六宫格,使用.aui-grid-nine.aui-grid-sixteen来布局。宫格类的操作因为加了线条分割的样式,所以在布局的时候最好为9或16的倍数,并且最大为9或16个块,最少为3或4。同样的也可以结合.aui-card

<div class="aui-content"><ul class="aui-grid-nine">
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-edit aui-text-primary"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-emoji aui-text-danger"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-favor aui-text-warning"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-phone aui-text-pink"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-taxi aui-text-dark"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-camera aui-text-info"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-like aui-text-blue"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-deliver aui-text-danger"></span><p>栏目</p></li>
        <li class="aui-col-xs-4 aui-text-center">
            <span class="aui-iconfont aui-icon-evaluate aui-text-warning"></span><p>栏目</p></li>
    </ul></div><p class="aui-padded-10">
        9宫格在大屏手机上效果貌似已经不理想了,顺便弄了个最大为4X4的排列方式。列数为标准4列,行数最大为4行。如果不想显示边框,将aui-grid-sixteen和aui-grid-sixteen li的边框样式去掉即可
</p><div class="aui-content"><ul class="aui-grid-sixteen">
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-pay aui-text-primary"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-send aui-text-danger"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-shop aui-text-warning"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-ticket aui-text-pink"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-cascades aui-text-dark"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-discover aui-text-info"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-scan aui-text-blue"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-settings aui-text-danger"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-form aui-text-warning"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-pic aui-text-warning"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-filter aui-text-pink"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-footprint aui-text-dark"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-home aui-text-danger"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-profile aui-text-warning"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-qrcode aui-text-pink"></span><p>栏目</p></li>
        <li class="aui-col-xs-3 aui-text-center">
            <span class="aui-iconfont aui-icon-service aui-text-dark"></span><p>栏目</p></li>
    </ul></div>