Placement explicite des éléments avec les lignes de grille

Pour un contrôle précis de l’emplacement des éléments de grille dans votre mise en page, utilisez le placement explicite des éléments. CSS Grid propose des propriétés permettant de spécifier exactement sur quelles lignes de grille un élément doit commencer et se terminer. Les deux principales propriétés pour cette tâche sont grid-column et grid-row. Ces propriétés fonctionnent en faisant référence aux lignes de grille, qui sont les lignes numérotées formant les limites entre les pistes de la grille (lignes et colonnes).

Comprendre les lignes de grille

• Les lignes de grille sont numérotées à partir de 1, en haut et à gauche de la grille ;
• Chaque piste de ligne et de colonne est délimitée par deux lignes de grille : une au début et une à la fin ;
• Si votre grille comporte trois colonnes, elle aura quatre lignes de grille verticales numérotées de 1 à 4 ; la même logique s’applique aux lignes.

Utilisation de grid-column et grid-row

• La propriété grid-column permet de spécifier où un élément doit commencer et se terminer horizontalement en faisant référence aux numéros de ligne de grille ;
• La propriété grid-row fonctionne de la même manière verticalement ;
• Utiliser la syntaxe abrégée : grid-column: start / end; et grid-row: start / end; ;
• Pour faire en sorte qu’un élément s’étende sur plusieurs pistes, définir la valeur de fin sur un numéro de ligne de grille supérieur.

Exemple :

• grid-column: 1 / 3; place l’élément en commençant à la ligne de grille 1 et en terminant avant la ligne 3 (s’étend sur deux colonnes) ;
• grid-row: 2 / 4; place l’élément en commençant à la ligne de grille 2 et en terminant avant la ligne 4 (s’étend sur deux lignes).

Le placement explicite des éléments offre un contrôle total sur la position et la taille de vos éléments de grille, ce qui le rend essentiel pour les mises en page complexes ou lorsque vous souhaitez mettre en avant certains éléments.

Il est important de comprendre la distinction entre le placement implicite et explicite dans CSS Grid. Lorsque vous utilisez le placement explicite, vous indiquez au navigateur exactement où chaque élément doit aller en les assignant à des lignes de grille spécifiques avec grid-column et grid-row. Cette approche est idéale lorsque vous avez besoin d’une mise en page fixe ou souhaitez mettre en avant certains éléments en contrôlant directement leur position et leur taille.

À l’inverse, le placement implicite se produit lorsque vous ne spécifiez pas les positions des lignes de grille pour les éléments. Dans ce cas, le navigateur placera automatiquement les éléments dans les cellules de grille disponibles suivantes selon l’ordre du HTML et l’algorithme de placement automatique de la grille. Le placement implicite est pratique pour le contenu dynamique ou lorsque vous n’avez pas besoin d’un contrôle précis sur la mise en page.

Choisir le placement explicite lorsque vous souhaitez :

• Contrôler la position exacte et l’étendue des éléments de grille ;
• Créer des mises en page complexes de type magazine ;
• Garantir la cohérence sur différents formats d’écran.

Utiliser le placement implicite lorsque vous :

• Disposez d’une mise en page simple et uniforme ;
• Travaillez avec un nombre dynamique ou inconnu d’éléments ;
• Souhaitez vous appuyer sur le flux automatique du navigateur pour plus d’efficacité.