Grid 栅格

使用说明

相对于layout用于页面布局,本框架的grid栅格布局主要用于列表页面,自动确定列宽;不过跟layout一样,grid栅格使用24等分的方法。

当grid是等宽分布的时候,由于电脑端能在显示一行的个数远多于手机端,为了保证手机端自适配,引入ax-split-*类,ax-split-1表示在手机端强制一行显示1个;ax-split-2表示在手机端强制一行显示2个;ax-split-*最多取值到6,即最多自适配6个;ax-split等于ax-split-1。基本结构如下:

                                <ul class="ax-grid ax-split-3">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                        

对ul元素使用ax-grid-*样式,表示一行划分为几列,支持ax-grid-1~ax-grid-24。比如:ax-grid-6表示一行分成6个等宽列。默认一行四列。

自由组合列表

使用ax-grid-*可任意创建等宽列表。

                            <ul class="ax-grid ax-grid-24">
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                            </ul>
                            <ul class="ax-grid ax-grid-12">
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                            </ul>
                            <ul class="ax-grid ax-grid-6">
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                            </ul>
                            <ul class="ax-grid ax-grid-3">
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                                <li>
                                    <section class="demo-section-border"></section>
                                </li>
                            </ul>
                        

不同边距的栅格

栅格之间的默认间距是0px,支持以下列表间距:

  • ax-space-0 0px的间隙(默认)
  • ax-space-xxs 4px的间隙
  • ax-space-xs 8px的间隙
  • ax-space-sm 10px的间隙
  • ax-space-md 14px的间隙
  • ax-space-lg 18px的间隙
  • ax-space-xl 22px的间隙
  • ax-space-xxl 28px的间隙

ax-space-md演示

                                        <ul class="ax-grid ax-space-md">
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                        </ul>
                        

ax-space-xxl演示


                                        <ul class="ax-grid ax-space-xxl">
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                            <li>
                                                <section class="demo-section-border"></section>
                                            </li>
                                        </ul>
                        

创建非等宽列表

请使用css3的原生属性grid-template-columns来自定义列数和列宽,通过该属性可定义任意想要的多列效果,以下为举例若干使用说明:

  • grid-template-columns:1fr 2fr; 两列,第二列是第一列两倍宽
  • grid-template-columns: 100px auto 100px; 三列,左右两列固定宽度,中间一列占满全部
  • grid-template-columns: repeat(auto-fill, 100px); 未知列,每列固定宽度,直至占满整行
  • grid-template-columns: repeat(2, 100px 200px); 四列,第一列和第二列固定宽度,据此再重复一次
                                    <ul class="ax-grid" style="grid-template-columns: 100px 200px auto 300px;">
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                    </ul>
                        

手机端自适应栅格

手机宽度较小,多列表格的显示效果比较差,所以可以通过追加ax-split类让多列变成1~6列。ax-split-1~ax-split-6表示在手机端下显示1列到6列。ax-split-1等效于ax-split。

                                    <ul class="ax-grid ax-split">
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                        <li>
                                            <section class="demo-section-border"></section>
                                        </li>
                                    </ul>
                        

表格式栅格

默认grid是没有类似表格那样的边框的,而表格的内部必须以tr+td创建节点结构,导致循环不便。如果用户即需要方便数据循环又希望具备表格那样的边框样式,可以对栅格追加ax-grid-table类。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
                                    <ul class="ax-grid ax-grid-table ax-split">
                                        <li>1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                        <li>5</li>
                                        <li>6</li>
                                        <li>7</li>
                                        <li>8</li>
                                    </ul>