Amaze UI

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> 结构

这部分代码已经整合到缩略图,无需再添加。

.doc-block-grid {
  margin-left: -5px;
  margin-right: -5px;
  > li {
    padding: 0 5px 10px 5px;
    img {
      border: 1px solid #CCC;
      padding: 2px;
      background: #FFF;
    }
  }
}

基础用法

只添加 .am-avg-sm-*,应用于所有屏幕尺寸。

Copy
<ul class="am-avg-sm-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-1.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-2.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-3.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-4.png" /></li>
</ul>

响应式

按需增加更多响应式 class,缩放窗口可以查看响应效果。

Copy
<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-1.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-2.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-3.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-4.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-1.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-2.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-3.png" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/2017-1-19-4.png" /></li>
</ul>

九宫格

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
Copy
<style type="text/css">
  .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;
}

</style>
<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>