AVG-Grid
Average Grid (used to be Block Grid) can be used to arrange contents. Use ul / ol to create columns in same width.
Responsive Breakpoints:
| Class | Interval |
|---|---|
.am-avg-sm-* | 0 - 640px |
.am-avg-md-* | 641px - 1024px |
.am-avg-lg-* | 1025px + |
Different from Grid, number here represents the number of divisions. For Instance, .am-avg-sm-2 will set the width of <li> to be 50%.
Considering generality (for menus, pictures etc), padding is not set for <li>. You may set it as your wish.
Attention: AVG Grid can be only apply to <ul> / <ol> stucture.
The following examples use styles below:
These codes have been integrated into thumbnail.
.doc-block-grid {
margin-left: -5px;
margin-right: -5px;
> li {
padding: 0 5px 10px 5px;
img {
border: 1px solid #CCC;
padding: 2px;
background: #FFF;
}
}
}All rights of pictures used in following samples belong to Microsoft Bing.
Usage
When there is only .am-avg-sm-*, it will be apply to all screens.
<ul class="am-avg-sm-4 am-thumbnails">
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-1.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-2.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-3.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-4.jpg" /></li>
</ul>Responsive Design
You may add more responsive classes as you wish. Scale the window to check the responsive effect.
<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-1.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-2.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-3.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-4.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-1.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-2.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-3.jpg" /></li>
<li><img class="am-thumbnail" src="https://amazeui.github.io/media/i/demos/bing-4.jpg" /></li>
</ul>More Example
Someone asked us to provide more examples, so here it is:
- 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;
}