Ionic - 4.8 Utiliser la grille Ionic (ion-grid)

La grille Ionic place le contenu en lignes et en colonnes, qui s'adaptent à la taille de l'écran. Elle fonctionne aussi bien sur mobile que sur ordinateur. Cette leçon montre comment réduire une carte sur grand écran, puis la centrer.

Structurer la grille

Une grille contient des lignes, et chaque ligne contient des colonnes. Le contenu, par exemple une carte, se place à l'intérieur d'une colonne. Ionic peut ainsi le redimensionner automatiquement.

Une colonne peut prendre une taille entre 1 et 12. Cette taille correspond à une fraction de la largeur totale : une colonne de 6 occupe la moitié de la largeur.

<ion-grid>
  <ion-row>
    <ion-col size='6'>
      <ion-card>Contenu</ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Adapter la taille selon l'écran

Pour adapter la taille à l'écran, utilisez les variantes par point de rupture. Le suffixe md correspond aux écrans moyens et plus. Sur un petit écran, la colonne prend la largeur totale. La liste complète des points de rupture figure dans la documentation officielle d'Ionic.

Pour centrer la colonne sur les écrans moyens et plus, ajoutez offset-md avec la valeur 3. La colonne de 6 est alors décalée de 3 colonnes à gauche, et laisse 3 colonnes vides à droite.

<ion-col size-md='6' offset-md='3'>
  <ion-card>Contenu</ion-card>
</ion-col>

• Placer le contenu dans une colonne
• Définir size pour la taille de base
• Ajouter size-md pour les écrans moyens et plus
• Ajouter offset-md pour centrer

En résumé

ion-grid organise le contenu en lignes et en colonnes sur 12 colonnes. Une colonne se règle avec size, puis avec des variantes selon l'écran. Les attributs size-md et offset-md permettent de la centrer sur les écrans moyens et plus.

Points clés

• La grille Ionic se compose de lignes et de colonnes.
• Une grille Ionic compte 12 colonnes au total.
• size-md règle la taille sur les écrans moyens et plus.
• offset-md décale la colonne pour la centrer.
• Les points de rupture sont décrits dans la documentation officielle.

Questions fréquentes

Qu'est-ce qu'un point de rupture ?

C'est une largeur d'écran à partir de laquelle une règle s'applique, comme md pour un écran moyen. La liste complète est dans la documentation officielle d'Ionic.

Pourquoi 12 colonnes ?

Ionic découpe la largeur en 12 parts égales. Une colonne de 6 prend donc la moitié, et une colonne de 3 un quart.

Comment centrer une colonne ?

Utilisez offset-md. Avec une colonne de 6 et un décalage de 3, la colonne est centrée sur les 12 colonnes.