网站宝库 - UI前端Html5组件
文档首页
基础部分
组件部分
扩展部分
JS部分
移动端
文档首页
基础部分
组件部分
扩展部分
JS部分
移动端

宫格布局

一行两列

11
22
33
44
<div class="ui-grid ui-grid-2">
    <div class="ui-grid-item">11</div>
    <div class="ui-grid-item">22</div>
    <div class="ui-grid-item">33</div>
    <div class="ui-grid-item">44</div>
</div>

一行三列

11
22
33
44
55
66
<div class="ui-grid ui-grid-3">
    <div class="ui-grid-item">11</div>
    <div class="ui-grid-item">22</div>
    <div class="ui-grid-item">33</div>
    <div class="ui-grid-item">44</div>
    <div class="ui-grid-item">55</div>
    <div class="ui-grid-item">66</div>
</div>

一行四列

11
22
33
44
55
66
77
88
<div class="ui-grid ui-grid-4">
    <div class="ui-grid-item">11</div>
    <div class="ui-grid-item">22</div>
    <div class="ui-grid-item">33</div>
    <div class="ui-grid-item">44</div>
    <div class="ui-grid-item">55</div>
    <div class="ui-grid-item">66</div>
    <div class="ui-grid-item">77</div>
    <div class="ui-grid-item">88</div>
</div>

一行五列

11
22
33
44
55
66
77
88
99
00
<div class="ui-grid ui-grid-5">
    <div class="ui-grid-item">11</div>
    <div class="ui-grid-item">22</div>
    <div class="ui-grid-item">33</div>
    <div class="ui-grid-item">44</div>
    <div class="ui-grid-item">55</div>
    <div class="ui-grid-item">66</div>
    <div class="ui-grid-item">77</div>
    <div class="ui-grid-item">88</div>
    <div class="ui-grid-item">99</div>
    <div class="ui-grid-item">00</div>
</div>

参数说明

参数 说明
ui-grid-2 一行两列
ui-grid-3 一行三列
ui-grid-4 一行四列
ui-grid-5 一行五列