Start Center End Top Middle Bottom Between Around

UI Grid

2 Grid modifiers

Grid container modifiers

Vous pouvez ajouter les « modifiers » suivants au niveau du grid container : .amui-g-grid

Modifier Description
is--start Align items horizontally: left
is--center Align items horizontally: center
is--end Align items horizontally: right
is--top Align items horizontally: right
is--middle Align items vertically: center
is--bottom Align items vertically: bottom
is--between Distribute item between the main axis of the container
is--around Distribute item around the main axis of the container

Alignement Horizontal (Left)

.col-sm-4
.col-sm-4
<div class="amui-g-grid row is--start show-grid">
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

Alignement Horizontal (center)

.col-sm-4
.col-sm-4
<div class="amui-g-grid row is--center show-grid">
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

Alignement Horizontal (Right)

.col-sm-4
.col-sm-4
<div class="amui-g-grid row is--end show-grid">
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

Alignement Vertical (Top)

.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
<div class="amui-g-grid is--top row show-grid">
  <div class="amui-g-grid__item col-sm-4">.col-sm-4<br>.col-sm-4<br>.col-sm-4<br></div>
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

Alignement Vertical (Middle)

.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
<div class="amui-g-grid is--middle row show-grid">
	<div class="amui-g-grid__item col-sm-4">.col-sm-4<br>.col-sm-4<br>.col-sm-4<br></div>
	<div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

Alignement Vertical (Bottom)

.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
<div class="amui-g-grid is--bottom row show-grid">
  <div class="amui-g-grid__item col-sm-4">.col-sm-4<br>.col-sm-4<br>.col-sm-4<br></div>
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

Alignement Between

.col-sm-4
.col-sm-4
<div class="amui-g-grid row is--between show-grid">
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

Alignement Around

.col-sm-4
.col-sm-4
<div class="amui-g-grid row is--around show-grid">
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
  <div class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>
← Grid system Grid items modifiers →