Grille Ionic

La grille d'Ionic est différente de celle de la plupart des autres frameworks ; elle utilise le modèle Flexible Box. De plus, sur mobile, presque tous les téléphones le prennent en charge. La classe `row` spécifie les lignes, et la classe `col` spécifie les colonnes.

Grille de taille égale

Si un élément avec la classe `row` contient des classes `col`, les colonnes seront définies sur une taille égale.

Dans l'exemple suivant, la classe `row` contient 5 classes `col`, et chaque colonne a une largeur de 20%.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Essayez-le vous-même »

Spécifier la largeur des colonnes

Vous pouvez définir différentes tailles pour les colonnes d'une ligne. Par défaut, les colonnes sont divisées en tailles égales. Mais vous pouvez également définir la largeur des colonnes en pourcentage (une ligne est divisée en 12 grilles).

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Essayez-le vous-même »

Remarque : Dans l'exemple, chaque classe `col` ajoute automatiquement une bordure et un arrière-plan gris.

Voici quelques noms de classes de pourcentage pour spécifier la largeur des colonnes :

.col-10	10%
.col-20	20%
.col-25	25%
.col-33	33.3333%
.col-50	50%
.col-67	66.6666%
.col-75	75%
.col-80	80%
.col-90	90%

Grille avec décalages

Les colonnes peuvent avoir un décalage à gauche, comme illustré dans l'exemple suivant :

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

Essayez-le vous-même »

Voici quelques noms de classes de décalage en pourcentage :

.col-offset-10	10%
.col-offset-20	20%
.col-offset-25	25%
.col-offset-33	33.3333%
.col-offset-50	50%
.col-offset-67	66.6666%
.col-offset-75	75%
.col-offset-80	80%
.col-offset-90	90%

---

Grille d'alignement vertical

Le modèle Flexbox facilite la définition de l'alignement vertical des colonnes. L'alignement vertical comprend le haut, le milieu et le bas, et peut être appliqué à toutes les colonnes d'une ligne ou à des colonnes spécifiques.

Dans l'exemple, la dernière colonne a le contenu le plus haut pour mieux démontrer l'alignement vertical.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Essayez-le vous-même »

---

Grille responsive

Lorsque les écrans des appareils mobiles changent d'orientation, comme le mode paysage ou portrait, la grille de chaque ligne doit pouvoir adapter sa taille en fonction des différentes largeurs.

Les classes responsive pour différents appareils sont les suivantes :

Classes responsive	Description
.responsive-sm	Inférieur à un téléphone en mode paysage
.responsive-md	Inférieur à tablette portrait
.responsive-lg	Inférieur à tablette paysage

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Essayez-le vous-même »

Autres extensions