Grid 宫格

宫格用于业务中多个子功能的导航,相比于列表的形式,具有更高的屏效。

<div class="h5ui-grid clearfix">
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
    <a href="" class="h5ui-grid_item">
        <i class="h5ui-grid_item_icon"><img src="https://s.h5ui.io/img/mark-green.png" width="32" alt=""></i>
        标题君
    </a>
</div>

最后更新于