Une grille définit des colonnes et des lignes, mais rien n'oblige un élément à occuper une seule case : une image de mise en avant peut très bien s'étaler sur deux colonnes, ou une barre latérale sur toute la hauteur disponible. C'est exactement ce que permettent grid-column et grid-row, en indiquant sur quelles lignes de la grille commence et se termine chaque élément.
Contrairement à grid-template-areas, qui nomme des zones, ces deux propriétés se posent directement sur l'enfant à positionner, en désignant des numéros de ligne de grille plutôt que des noms.
Définition
grid-column et grid-row placent un élément sur une grille CSS Grid en indiquant entre quelles lignes verticales ou horizontales il doit s'étendre. Les lignes d'une grille sont numérotées à partir de 1, avant la première colonne ou ligne, et non à partir de 0. Ces deux propriétés sont des raccourcis pour grid-column-start / grid-column-end et grid-row-start / grid-row-end, rarement utilisées séparément dans la pratique.
La syntaxe start / end
.carte-large {
grid-column: 1 / 3;
}
.carte-etroite {
grid-column: 3 / 4;
}
.colonne-complete {
grid-column: 1 / -1;
}grid-column: 1 / 3 place un élément entre la ligne de grille 1 et la ligne de grille 3, ce qui lui fait occuper deux colonnes. Le nombre -1 désigne toujours la dernière ligne de la grille, quel que soit le nombre de colonnes défini : grid-column: 1 / -1 fait donc occuper toute la largeur à un élément, une astuce très utilisée pour un en-tête ou un pied de page dans une grille qui a par ailleurs plusieurs colonnes.
| Syntaxe | Effet |
|---|---|
grid-column: 2 | Occupe une seule case, celle qui commence à la ligne 2 |
grid-column: 1 / 3 | S'étend de la ligne 1 à la ligne 3, donc deux colonnes |
grid-column: span 2 | S'étend sur deux colonnes à partir de la position actuelle |
grid-column: 1 / -1 | Occupe toute la largeur de la grille, quel que soit son nombre de colonnes |
Le mot-clé span, une alternative pratique
Plutôt que de calculer la ligne de fin, span indique simplement sur combien de colonnes ou de lignes s'étendre à partir du point de départ. grid-column: span 2 est souvent plus simple à écrire que de calculer manuellement où tombe la ligne de fin, surtout dans une grille dont le nombre de colonnes peut changer selon la taille d'écran.
grid-row suit exactement les mêmes règles que grid-column, avec ses propres lignes horizontales à la place des lignes verticales. grid-row: 2 / 4 ou grid-row: span 2 fonctionnent de façon identique, ce qui évite d'avoir à apprendre une syntaxe séparée pour l'axe vertical. Rien n'empêche non plus deux éléments de partager la même zone de grille, en se recouvrant partiellement ou totalement : la grille ne bloque jamais un chevauchement, elle se contente de positionner chaque élément selon les lignes indiquées.
Un piège classique : confondre ligne de grille et colonne
Les nombres utilisés dans grid-column ne comptent pas des colonnes, mais des lignes de grille, les traits verticaux qui séparent les colonnes. Une grille à trois colonnes a quatre lignes de grille : une avant la première colonne, une entre chaque paire de colonnes, et une après la dernière.
Questions fréquentes
span dans la même déclaration ?Oui, c'est même l'usage le plus courant : grid-column: 2 / span 2 place l'élément à partir de la ligne 2 et l'étend sur deux colonnes, sans avoir à calculer la ligne de fin exacte. Cette combinaison évite les erreurs de calcul tout en gardant un point de départ précis.
grid-column dépasse le nombre de colonnes de la grille ?La grille crée automatiquement des colonnes implicites supplémentaires pour accueillir le dépassement, avec une largeur par défaut qui peut ne pas correspondre à ce qui était voulu. C'est une source fréquente de mises en page cassées, à surveiller quand une grille responsive change de nombre de colonnes selon une Media query.
grid-row même si on ne veut pas changer la hauteur d'un élément ?Non, grid-row est facultatif. Sans elle, un élément occupe une seule ligne, celle qui lui revient dans l'ordre naturel de placement de la grille. On ne l'ajoute que pour faire déborder volontairement un élément sur plusieurs lignes, par exemple une image qui doit couvrir la hauteur de deux rangées de texte.