AVG-Grid
Average Grid，均分网格（原 Block Grid），使用 ul / ol 创建等分列，用于内容的排列。
响应式断点为：
| Class | 区间 |
|---|---|
.am-avg-sm-* | 0 - 640px |
.am-avg-md-* | 641px - 1024px |
.am-avg-lg-* | 1025px + |
与布局网格不同的是，这里的数字表示几等分，而不是占 12 等分中的几列，比如 .am-avg-sm-2 会将子元素 <li> 的宽度设置为 50%。
考虑到通用性（菜单、图片）等，<li> 没有设置 padding，使用时需根据需求自行设置。
另外需要注意的 AVG Grid 只能用于 <ul> / <ol> 结构。
下面的演示中，添加了以下自定义样式（Less）：
这部分代码已经整合到缩略图，无需再添加。
.doc-block-grid {
margin-left: -5px;
margin-right: -5px;
> li {
padding: 0 5px 10px 5px;
img {
border: 1px solid #CCC;
padding: 2px;
background: #FFF;
}
}
}演示图标版权归微软 Bing 所有。
基本使用
只添加 .am-avg-sm-*，应用于所有屏幕尺寸。
<ul class="am-avg-sm-4 am-thumbnails">
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/001.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/002.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/003.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/004.jpg" /></li>
</ul>响应式
按需增加更多响应式 class，缩放窗口可以查看响应效果。
<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/001.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/002.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/003.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/004.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/001.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/002.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/003.jpg" /></li>
<li><img class="am-thumbnail" src="http://amazeui.shopxo.net/static/images/004.jpg" /></li>
</ul>九宫格
看到同学提这样的需求，就简单写一个示例。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<ul class="am-avg-sm-3 boxes">
<li class="box box-1">1</li>
<li class="box box-2">2</li>
<li class="box box-3">3</li>
<li class="box box-4">4</li>
<li class="box box-5">5</li>
<li class="box box-6">6</li>
<li class="box box-7">7</li>
<li class="box box-8">8</li>
<li class="box box-9">9</li>
</ul>.boxes {
width: 300px;
}
.boxes .box {
height: 100px;
color: #eee;
line-height: 100px;
text-align: center;
font-weight: bold;
transition: all .2s ease;
}
.boxes .box:hover {
font-size: 250%;
transform: rotate(360deg);
}
.box-1 {
background-color: red;
}
.box-2 {
background-color: orange;
}
.box-3 {
background-color: #0000ff;
}
.box-4 {
background-color: #008000;
}
.box-5 {
background-color: red;
}
.box-6 {
background-color: orange;
}
.box-7 {
background-color: #0000ff;
}
.box-8 {
background-color: #008000;
}
.box-9 {
background-color: red;
}