Grille ionique(Grille)

Ionic's Grid est différent de la plupart des autres frameworks. Il utilise le modèle Flexible Box. Et côté mobile, pratiquement tous les téléphones mobiles le prennent en charge. Le style de ligne spécifie les lignes et le style de colonne spécifie les colonnes.

Grille de taille égale

Si un élément avec un style de ligne contient un style col, col sera défini sur la même taille.

Dans l'exemple suivant, le style de ligne contient 5 styles de col et la largeur de chaque col est 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>

Spécifier la largeur des colonnes

Vous pouvez définir la taille de chaque colonne dans une ligne pour qu'elle soit différente. Par défaut, les colonnes sont divisées en tailles égales. Mais vous pouvez également définir la largeur des colonnes en pourcentage (12 grilles par ligne).

<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>

Remarque : Dans l'exemple, chaque style de couleur ajoutera automatiquement une bordure supérieure et un arrière-plan gris.

Vous trouverez ci-dessous les noms de styles qui spécifient certains pourcentages de largeur de colonne :

Grilles avec décalages

Les colonnes peuvent avoir un jeu de décalage à gauche, les exemples sont les suivants :

<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>

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

Aligner la grille verticalement

Le modèle flexbox permet il est facile de définir l’alignement vertical des colonnes. L'alignement vertical inclut le haut, le milieu et le bas et peut être appliqué à chaque ligne, colonne ou colonne spécifiée.

Dans l'exemple, la dernière colonne est définie avec le contenu le plus élevé pour une meilleure démonstration de l'alignement vertical de la grille.

<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>

Grille réactive

Lorsque l'écran de l'appareil portable est commuté, comme un écran horizontal, un écran vertical, etc. Vous devez paramétrer la grille de chaque rangée pour adapter la taille en fonction des différentes largeurs.

Les styles de classes réactives pour différents appareils sont les suivants :

<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>