Grid intermédiaire
grid-column
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:
Ces propriétés peuvent être combinées en utilisant simplement grid-column.
Par exemple, le code suivant:
grid-column-start: 1;
grid-column-end: 4;Est équivalent à celui-ci:
grid-row
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:
Ces propriétés peuvent être combinées en utilisant simplement grid-row.
Par exemple, le code suivant:
grid-row-start: 1;
grid-row-end: 4;Est équivalent à celui-ci:
span
La valeur span combinée aux propriétés grid-column & grid-row permets 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:
grid-area
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:
.no1 {
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;
}Est équivalent à celui-ci:
grid-template-areas
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:
Résumé vidéo
