Ionic - 8.3 Les grilles Ionic : lignes, colonnes et tailles
Une grille permet d'organiser les éléments d'une page en lignes et en colonnes. Ionic fournit cette mise en page sans obliger à écrire de CSS. Cette leçon présente les trois composants de la grille, puis montre comment les colonnes s'adaptent à la taille de l'écran.
Les trois composants d'une grille
Une grille repose sur trois composants combinés : ion-grid englobe l'ensemble, ion-row crée les lignes et ion-col contient le contenu. Ces composants s'appuient sur le principe des flexbox de CSS.
Le contenu doit être placé dans les colonnes, car c'est là que se trouve l'affichage. Les colonnes peuvent être réglées en taille grâce à des attributs.
Adapter les colonnes à l'écran
L'attribut size définit la largeur de base d'une colonne, sur douze colonnes possibles. L'attribut size-sm définit une largeur différente pour les petits écrans.
Sur la page de découverte, l'image ne prend pas toute la largeur en mode mobile. Elle est placée dans une colonne dont la taille change selon la largeur de l'écran.
Tester la grille sur une page
Pour tester, on utilise la page de nouvelle offre. On supprime la marge intérieure du contenu avec la classe ion-no-padding sur ion-grid, puis on ajoute une ligne et une colonne avec une bordure rouge fine pour les voir.
Sans taille précisée, une colonne prend toute la largeur disponible. Avec douze colonnes, elles se partagent la place de manière égale. Une treizième colonne ne tient pas sur la même ligne, car une ligne ne peut contenir que douze colonnes. Lorsque l'écran rétrécit, Ionic ajoute automatiquement un point de rupture.
En résumé
Une grille Ionic combine ion-grid, ion-row et ion-col pour organiser la page. Les attributs size et size-sm adaptent la largeur des colonnes à la taille de l'écran. La classe ion-no-padding supprime la marge intérieure de la grille.
Points clés
- ion-grid englobe la grille, ion-row crée les lignes et ion-col contient le contenu.
- La grille s'appuie sur le principe des flexbox, sans CSS à écrire.
- L'attribut size définit la largeur d'une colonne sur douze.
- L'attribut size-sm définit une largeur pour les petits écrans.
- La classe ion-no-padding supprime le padding par défaut du contenu.
Questions fréquentes
Combien de colonnes une ligne peut-elle contenir ?
Une ligne Ionic est découpée en douze colonnes. Au-delà, les colonnes ne tiennent plus sur la même ligne.
Faut-il écrire du CSS pour créer une grille ?
Non. Les composants Ionic gèrent la mise en page. Du CSS peut seulement servir à ajouter des styles visuels.
À quoi sert la classe ion-no-padding ?
Elle supprime le padding par défaut du contenu, pour que la grille occupe toute la largeur disponible.