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-00px的间隙（默认）ax-space-xxs4px的间隙ax-space-xs8px的间隙ax-space-sm10px的间隙ax-space-md14px的间隙ax-space-lg18px的间隙ax-space-xl22px的间隙ax-space-xxl28px的间隙
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>
创建内部实边
给ax-grid节点追加ax-fence类即可实现项目之间1px的边距，如果需要使用外边框可追加ax-border类。
<ul class="ax-grid ax-fence">
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
</ul>
<div class="ax-break"></div><div class="ax-break"></div>
<ul class="ax-grid ax-fence ax-border">
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></li>
<li style="height:100px;"></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>