网格布局 - AuxUI - 模块化前端UI框架

动态网格组件允许你利用网格组件创建一个动态的响应式网格布局。在任何尺寸的设备中，网格单元都将自动地、流动地、无缝地调整自身构建无缝的多列布局。

实例

<!-- html -->
<div class="ui-grid">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
</div>
<!-- js -->
<script type="text/javascript">
auxui(['grid'], function(){
    $(".ui-grid").grid({
        no_columns: 4,
        padding_x: 10,
        padding_y: 10,
        margin_bottom: 50
    });
});
</script>

配置参数

名称	描述
column_number	网格布局一行的列数，默认一行3列数。
padding_x	网格在X轴方向的padding值，默认值为10像素。
padding_y	网格在Y轴方向的padding值，默认值为10像素。
margin_bottom	网格底部的margin值，默认值为50像素。
window_resize	当窗口大小改变小于设定值，每行显示一列，默认值768