UI Grid

1 Grid system

La grille fonctionne avec un conteneur de grille (.amui-g-grid .row) et des éléments (.amui-g-grid__item .col-x-x) :

Un conteneur de grille (.amui-g-grid .row) peut être placé n'importe où.
Un élément (.amui-g-grid__item .col-x-x) doit être placé dans un conteneur de grille (.amui-g-grid .row) en tant qu'enfant immédiat.
Un conteneur de grille (.amui-g-grid .row) doit avoir au moins un élément (.amui-g-grid__item .col-x-x) comme enfant immédiat.
Un conteneur de grille (.amui-g-grid .row) peut uniquement avoir des éléments (.amui-g-grid__item .col-x-x) comme enfants immédiats.

Vous pouvez modifier le conteneur de grille (.amui-g-grid .row) et les éléments (.amui-g-grid__item) avec des modificateurs : voir section Grid modifiers

Vous pouvez modifier la largeur d'un élément (.amui-g-grid__item) en ajoutant les classes natives de bootstrap 3 tel que, .col-sm-12.

Voir la documentation sur le système de grille de Bootstrap 3

2 Grid All sizes

.col-sm-12

.col-sm-6

.col-sm-4

.col-sm-3

.col-sm-2

.col-sm-1

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

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

<div class="amui-g-grid row 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 class="amui-g-grid__item col-sm-4">.col-sm-4</div>
</div>

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

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

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

3 Grid options

Taille d’écrans	Suffixe
None (auto)	.col-xs-
750px	.col-sm-
970px	.col-md-
1170px	.col-lg-

← UI Grid Grid modifiers →