Placement des éléments enfants grid-column et grid-row¶
Les propriétés CSS présentées dans cette page sont appliquées sur les éléments-enfants de la grille, afin de les positionner à l'intérieur de celle-ci.
grid-column¶
La propriété grid-column est constituée de deux sous-propriétés :
grid-column-startgrid-column-end
Ces propriétés permettent de définir où un élément devrait être affiché en fonction d'une ligne verticale ↕️ de départ et de fin dans la grille.
Info
Afin de bien comprendre et visualiser ces lignes, il est fortement suggéré d’utiliser l’inspecteur.
Par exemple :
See the Pen Grid - grid-column-start & grid-column-end by TIM Montmorency (@tim-momo) on CodePen.
Info
Il est possible d'utiliser des chiffres négatifs afin de compter à partir de la fin de la grille plutôt que de son début.
Ces propriétés peuvent être combinées en utilisant simplement grid-column.
Exemple :
grid-column-start: 1;
grid-column-end: 4;
Est équivalent à :
grid-column: 1 / 4;
See the Pen Grid - grid-column by TIM Montmorency (@tim-momo) on CodePen.
En savoir plus sur grid-column
grid-row¶
La propriété grid-row est constituée de deux sous-propriétés :
grid-row-startgrid-row-end
Ces propriétés permettent de définir où un élément devrait être affiché en fonction d'une ligne horizontale ↔️ de départ et de fin dans la grille.
Par exemple:
See the Pen Grid - grid-row-start & grid-row-end by TIM Montmorency (@tim-momo) on CodePen.
Warning
Il est possible d'utiliser des nombres négatifs, mais uniquement avec les rows explicites.
Ces propriétés peuvent être combinées en utilisant simplement grid-row.
Exemple :
grid-row-start: 1;
grid-row-end: 4;
Est équivalent à :
grid-row: 1 / 4;
See the Pen Grid - grid-row by TIM Montmorency (@tim-momo) on CodePen.
Valeur span de grid-column ou grid-row¶
La valeur span, combinée aux propriétés grid-column & grid-row, permet d'étendre un élément sur plus d'une colonne ou rangée dans une grille sans avoir à connaître le numéro de ligne de début ou de fin.
Par exemple, pour étendre l'élément 2 🔵, il est possible de faire:
grid-column: span 2;
See the Pen Grid - Span by TIM Montmorency (@tim-momo) on CodePen.