UI Grid
3 Grid items modifiers
Vous pouvez ajouter les « modifiers » suivants au niveau du grid items : .amui-g-grid__item
| Modifier | Description |
|---|---|
| is--pull | Pull an item to the left of the grid container |
| is--push | Push an item to the right of the grid container |
| is--middle | Align item vertically : Center |
| is--top | Align item vertically : Top |
| is--bottom | Align item vertically : Bottom |
Alignement Horizontal (Pull left)
.col-xs-4
.col-xs-6
<div class="amui-g-grid row show-grid">
<div class="amui-g-grid__item col-xs-4">.col-xs-4</div>
<div class="amui-g-grid__item is--pull col-xs-6">.col-xs-6</div>
</div>
Alignement Horizontal (Push right)
.col-xs-4
.col-xs-6
<div class="amui-g-grid row show-grid">
<div class="amui-g-grid__item col-xs-4">.col-xs-4</div>
<div class="amui-g-grid__item is--push col-xs-6">.col-xs-6</div>
</div>
Alignement Vertical (Middle)
.col-xs-4
.col-xs-6
<div class="amui-g-grid row show-grid">
<div style="height:100px;" class="amui-g-grid__item col-xs-4">.col-xs-4</div>
<div style="height:100px;" class="amui-g-grid__item is--middle col-xs-6">.col-xs-6</div>
</div>
Alignement Vertical (Top)
.col-xs-4
.col-xs-6
<div class="amui-g-grid row show-grid">
<div style="height:100px;" class="amui-g-grid__item is--middle col-xs-4">.col-xs-4</div>
<div style="height:100px;" class="amui-g-grid__item is--top col-xs-6">.col-xs-6</div>
</div>
Alignement Vertical (Bottom)
.col-xs-4
.col-xs-6
<div class="amui-g-grid row show-grid">
<div style="height:100px;" class="amui-g-grid__item is--middle col-xs-4">.col-xs-4</div>
<div style="height:100px;" class="amui-g-grid__item is--bottom is--bottom col-xs-6">.col-xs-6</div>
</div>