grid布局

qui-grids

基础用法 默认每行三列 column3, 想要每行4例侧column4 内置列数有 2, 3, 4, 5, 6, 7
与felx布局不同的就是会换行 下面的代码，qui-grids column4 就会有两行四列

        <div class="qui-grids column4">
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
        </div>

使每个宫格拥有上下左右间隙 gutter10 内置间隙有5, 10, 15, 20, 30, 40

          <div class="qui-grids gutter20">
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
        </div>

使每个宫格只拥有上下间隙 gutter10-tb, 就是只有上面和下面有padding, 内置间隙有5, 10, 15, 20, 30, 40

          <div class="qui-grids gutter20-tb">
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
            <div class="qui-grid">
                <div class="icon-timefill"></div>
                <div>标题</div>
            </div>
        </div>

用 class=”hem”的div 包住所有qui-grid,可裁掉外围间隙 （常用）

      <div class="qui-grids gutter20">
            <div class="hem">
                <div class="qui-grid">
                    <div class="icon-timefill"></div>
                    <div>标题</div>
                </div>
                <div class="qui-grid">
                    <div class="icon-timefill"></div>
                    <div>标题</div>
                </div>
                <div class="qui-grid">
                    <div class="icon-timefill"></div>
                    <div>标题</div>
                </div>
            </div>
        </div>

使用宫格用边框

      <div class="qui-grids border">
            <div class="hem">
                <div class="qui-grid">
                    <div class="icon-timefill"></div>
                    <div>标题</div>
                </div>
                <div class="qui-grid">
                    <div class="icon-timefill"></div>
                    <div>标题</div>
                </div>
                <div class="qui-grid">
                    <div class="icon-timefill"></div>
                    <div>标题</div>
                </div>
            </div>
        </div>