Ionic - 8.4 Contrôler la taille et le décalage des colonnes
Cette leçon prolonge la précédente. Elle montre comment régler la largeur de chaque colonne avec l'attribut size, comment laisser un espace vide et comment décaler une colonne avec offset. Les exemples reposent sur un calcul simple sur douze colonnes.
Régler la largeur des colonnes
Une grille compte au maximum douze colonnes. Avec size, on indique la largeur de chaque colonne : par exemple cinq pour la première, trois pour la deuxième et quatre pour la dernière. Ensemble, ces trois colonnes occupent les douze emplacements.
Il est aussi possible de ne pas utiliser toutes les colonnes. Si l'on retire une colonne, un espace vide apparaît à la fin de la ligne, comme sur la page de découverte.
Décaler une colonne avec offset
Sur la page de découverte, une colonne de taille huit suit un décalage de deux, soit dix emplacements sur douze. L'attribut offset pousse la colonne vers la droite du nombre d'emplacements indiqué.
Pour placer la première colonne au centre, on utilise un décalage de trois. La colonne est alors poussée de trois emplacements vers la droite.
Centrer une grille
Pour centrer trois colonnes de taille trois, il faut neuf emplacements sur douze. Il reste donc trois emplacements libres.
En répartissant ces trois emplacements de chaque côté, on obtient un décalage de 1,5. Chaque côté reçoit alors une moitié, soit un et demi.
En résumé
L'attribut size règle la largeur des colonnes sur douze. Une colonne non utilisée laisse un espace vide, et offset décale une colonne vers la droite. Pour centrer, on calcule les emplacements restants et on les divise par deux.
Points clés
- Une grille Ionic compte au maximum douze colonnes.
- L'attribut size indique la largeur de chaque colonne sur douze.
- Des colonnes non utilisées laissent un espace vide.
- L'attribut offset décale une colonne vers la droite.
- Pour centrer, on divise les emplacements libres par deux.
Questions fréquentes
Que se passe-t-il si les tailles ne font pas douze au total ?
Il reste un espace vide à droite. La grille ne remplit pas toute la ligne.
Peut-on utiliser un décalage décimal ?
Oui. La vidéo utilise un décalage de 1,5 pour centrer trois colonnes de taille trois.
Quelle est la prochaine étape de ce module ?
La leçon suivante porte sur le contrôle de l'alignement de la grille.