九宫格+十六宫格

最后更新于:2022-04-01 01:24:28

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-my aui-text-primary"></span> <p>栏目</p> </li> ...... </ul> </div> ~~~ #### 十六宫格 ~~~ <div class="aui-content"> <ul class="aui-grid-sixteen"> <li class="aui-col-xs-3 aui-text-center"> <span class="aui-iconfont aui-icon-my aui-text-primary"></span> <p>栏目</p> </li> ...... </ul> </div> ~~~
';