Grid intermédiaireLes 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.
La propriété grid-column est constituée de deux sous propriétés: grid-column-start et grid-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.
Par exemple:
See the Pen Grid - % vs fr gap by TIM Montmorency (@tim-momo) on CodePen.
Ces propriétés peuvent être combinées en utilisant simplement grid-column.
Par exemple, le code suivant:
Est équivalent à celui-ci:
See the Pen Grid - grid-column by TIM Montmorency (@tim-momo) on CodePen.
La propriété grid-row est constituée de deux sous propriétés: grid-row-start et grid-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 Nouveau by TIM Montmorency (@tim-momo) on CodePen.
Ces propriétés peuvent être combinées en utilisant simplement grid-row.
Par exemple, le code suivant:
Est équivalent à celui-ci:
See the Pen Grid - grid-column by TIM Montmorency (@tim-momo) on CodePen.
La valeur span combinée aux propriétés grid-column & grid-row permet d'étendre un élément sur plus d'une d'une colonne ou une rangée dans une grille sans avoir à connaitre le numéro de ligne de début ou de fin.
Par exemple, pour étendre l'élément 2 🔵, il est possible de faire:
See the Pen Grid - grid-row by TIM Montmorency (@tim-momo) on CodePen.
Exercice
Exercice : lien partagé en cours.
La propriété grid-area permet de définir à la fois la valeur de grid-row-start, grid-column-start, grid-row-end et grid-column-end.
Par exemple le code suivant:
Est équivalent à celui-ci:
See the Pen Grid - Span by TIM Montmorency (@tim-momo) on CodePen.
La propriété grid-template-areas permets de nommer des zones dans une grille. Cette approche permet de conceptualiser facilement la disposition des éléments.
Par exemple, si l'élément vert 🟢 représente un menu latéral, l'élément bleu 🔵 le contenu principal et l'élément rouge 🔴 un pied de page, il serait possible de les distribuer dans une grille grâce à grid-area:
See the Pen Grid - grid-template-area by TIM Montmorency (@tim-momo) on CodePen.
grid-template-areas prend un "s" à la fin.
Exercices
2 exercices : liens partagés en cours.