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。基本结构如下：
-
6 -
6 -
6 -
6 -
6 -
6 -
6 -
6
<div class="ax-grid ax-split-3">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-6">6</li>
<li class="ax-grid-block ax-col-6">6</li>
<li class="ax-grid-block ax-col-6">6</li>
<li class="ax-grid-block ax-col-6">6</li>
<li class="ax-grid-block ax-col-6">6</li>
<li class="ax-grid-block ax-col-6">6</li>
<li class="ax-grid-block ax-col-6">6</li>
<li class="ax-grid-block ax-col-6">6</li>
</ul>
</div>
ax-col-*表示列占多少份，支持ax-col-1~ax-col-24。比如：ax-col-6表示在24等分前提下该栅格占6份，4个栅格完成一行。
自由组合列表
使用ax-col-*可任意组合列表列数。
-
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
1 -
2 -
2 -
2 -
2 -
2 -
2 -
2 -
2 -
2 -
2 -
2 -
2 -
6 -
12 -
6 -
6 -
6 -
6 -
6 -
12 -
8 -
4 -
8 -
8 -
8 -
4 -
4 -
8 -
4 -
4 -
4 -
4 -
4 -
4 -
4 -
4 -
6 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
12 -
3 -
3 -
6
<div class="ax-grid">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-grid-block ax-col-1"><section class="demo-section-border">1</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-grid-block ax-col-2"><section class="demo-section-border">2</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-12"><section class="demo-section-border">12</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-12"><section class="demo-section-border">12</section></li>
<li class="ax-grid-block ax-col-8"><section class="demo-section-border">8</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-8"><section class="demo-section-border">8</section></li>
<li class="ax-grid-block ax-col-8"><section class="demo-section-border">8</section></li>
<li class="ax-grid-block ax-col-8"><section class="demo-section-border">8</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-8"><section class="demo-section-border">8</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-grid-block ax-col-4"><section class="demo-section-border">4</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-12"><section class="demo-section-border">12</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section-border">3</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
</ul>
</div>
由于浏览器特性，IE和Edge对于除不尽的百分比会四舍五入，结果导致换行显示。比如一行分成24分，在IE或Edge下每一份的宽度是4.16667%，那么结果大于100%，导致换行；比如一行分成6分，在IE或Edge下每一份的宽度是16.6667%，那么结果大于100%，导致换行。本Grid系统已经做了Hack处理。
不同边距的栅格
栅格之间的默认间距是0px，用户可根据需要修改相应的css。如果需要修改栅格默认间距，请尝试修改以下样式：
<style>
.ax-grid {
margin: 0 auto;
}
.ax-grid-inner {
margin: auto 0;
}
.ax-grid-block {
padding: 0;
}
</style>
除了默认间距之外，本框架栅格可以设置7种间隙：
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演示
-
6 -
6 -
6 -
6 -
6 -
6 -
6 -
6
<div class="ax-grid ax-space-md">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
</ul>
</div>
ax-space-xxl演示
-
6 -
6 -
6 -
6 -
6 -
6 -
6 -
6
<div class="ax-grid ax-space-xxl">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section-border">6</section></li>
</ul>
</div>
栅格模拟表格
如果栅格不能撑满一行或者没有栅格，模拟失败，用户可自行用js解决。ax-spirit对grid表格同样有效。
-
6 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
3 -
12 -
3 -
3 -
6
<ul class="ax-grid-table">
<li class="ax-grid-block ax-col-6"><section class="demo-section">6</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-12"><section class="demo-section">12</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-6"><section class="demo-section">6</section></li>
</ul>
模拟失败效果。
-
6 -
3 -
3
<ul class="ax-grid-table">
<li class="ax-grid-block ax-col-6"><section class="demo-section">6</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
<li class="ax-grid-block ax-col-3"><section class="demo-section">3</section></li>
</ul>
等分栅格
与layout等分布局类似，为了能使用5/7/9/11等分布局，使用ax-col-*-avg进行等分，等分栅格ax-col-*-avg支持从1到12。比如ax-col-3-avg表示本行等分为3份，该栅格占33.33%。
使用ax-grid-table类等分栅格。
-
1-avg -
2-avg -
2-avg -
3-avg -
3-avg -
3-avg -
4-avg -
4-avg -
4-avg -
4-avg -
5-avg -
5-avg -
5-avg -
5-avg -
5-avg -
6-avg -
6-avg -
6-avg -
6-avg -
6-avg -
6-avg -
7-avg -
7-avg -
7-avg -
7-avg -
7-avg -
7-avg -
7-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg
<ul class="ax-grid-table">
<li class="ax-grid-block ax-col-1-avg"><section class="demo-section">1-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-2-avg"><section class="demo-section">2-avg</section></li>
<li class="ax-grid-block ax-col-2-avg"><section class="demo-section">2-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-3-avg"><section class="demo-section">3-avg</section></li>
<li class="ax-grid-block ax-col-3-avg"><section class="demo-section">3-avg</section></li>
<li class="ax-grid-block ax-col-3-avg"><section class="demo-section">3-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section">4-avg</section></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section">4-avg</section></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section">4-avg</section></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section">4-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section">5-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section">6-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section">7-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section">8-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section">9-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section">10-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section">11-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section">12-avg</section></li>
</ul>
使用ax-grid类等分栅格。
-
1-avg -
2-avg -
2-avg -
3-avg -
3-avg -
3-avg -
4-avg -
4-avg -
4-avg -
4-avg -
5-avg -
5-avg -
5-avg -
5-avg -
5-avg -
6-avg -
6-avg -
6-avg -
6-avg -
6-avg -
6-avg -
7-avg -
7-avg -
7-avg -
7-avg -
7-avg -
7-avg -
7-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
8-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
9-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
10-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
11-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg -
12-avg
<div class="ax-grid">
<ul class="ax-grid-inner">
<li class="ax-grid-block ax-col-1-avg"><section class="demo-section-border">1-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-2-avg"><section class="demo-section-border">2-avg</section></li>
<li class="ax-grid-block ax-col-2-avg"><section class="demo-section-border">2-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-3-avg"><section class="demo-section-border">3-avg</section></li>
<li class="ax-grid-block ax-col-3-avg"><section class="demo-section-border">3-avg</section></li>
<li class="ax-grid-block ax-col-3-avg"><section class="demo-section-border">3-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section-border">4-avg</section></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section-border">4-avg</section></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section-border">4-avg</section></li>
<li class="ax-grid-block ax-col-4-avg"><section class="demo-section-border">4-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section-border">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section-border">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section-border">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section-border">5-avg</section></li>
<li class="ax-grid-block ax-col-5-avg"><section class="demo-section-border">5-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section-border">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section-border">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section-border">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section-border">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section-border">6-avg</section></li>
<li class="ax-grid-block ax-col-6-avg"><section class="demo-section-border">6-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section-border">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section-border">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section-border">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section-border">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section-border">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section-border">7-avg</section></li>
<li class="ax-grid-block ax-col-7-avg"><section class="demo-section-border">7-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-grid-block ax-col-8-avg"><section class="demo-section-border">8-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-grid-block ax-col-9-avg"><section class="demo-section-border">9-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-grid-block ax-col-10-avg"><section class="demo-section-border">10-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-grid-block ax-col-11-avg"><section class="demo-section-border">11-avg</section></li>
<li class="ax-clear"></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
<li class="ax-grid-block ax-col-12-avg"><section class="demo-section-border">12-avg</section></li>
</ul>
</div>