Table Des Matières
Concepts et Terminologie
La spécification Grid introduit certaines terminologies et concepts que nous devons comprendre afin que nous puissions utiliser la grille pour qu’elle soit pleinement efficace. Par défaut, le contexte directionnel d’un document HTML est de gauche à droite, et tous les exemples suivants l’assument.
Si la direction de base de HTML est de droite à gauche, les concepts s’appliquent toujours, sauf que la direction du flux de blocs devient de droite à gauche, où l’index 1 commence à droite. La modification du mode d’écriture du document de l’horizontale à la verticale affecte également le sens du flux du bloc. Ceci sera couvert dans la section axe de colonne et axe de ligne.
Lignes de grille
Les lignes de grille sont les lignes horizontales et verticales qui constituent la base de la structure de la grille. Ils servent à positionner les éléments sur la grille. Nous pouvons nous référer à eux par index numérique, qui commence à 1.
Les lignes de grille ont également des indices négatifs, qui nous permettent de référencer les lignes de grille à partir de la fin de la grille. L’un des cas d’utilisation pour les indices négatifs est si vous avez besoin d’un élément dans la dernière colonne, quel que soit le nombre de pistes, puis donner à cet élément une propriété grid-column-end de -1 qui va la gérer.
.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
}
.item {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}Il est possible de nommer les lignes de grille afin de ne pas compter sur la ligne de grille dont vous avez besoin de faire référence. Ces noms peuvent être déclarés comme des paramètres facultatifs dans grid-template-columns et grid-template-rows propriété.
.grid-container {
display: grid;
grid-template-columns: 150px [col-foo] 150px 150px [col-bar];
grid-template-rows: 150px [row-foo] 150px [row-bar];
}
.item {
grid-column-start: col-foo;
grid-column-end: col-bar;
grid-row-start: row-foo;
grid-row-end: row-bar;
}Piste et Cellule de Grille
Une piste de grille est l’espace entre 2 lignes de grille adjacentes. Ce sont les lignes et les colonnes de votre grille. Le schéma ci-dessous met en évidence la piste de la grille entre les lignes de grille de la première et de la deuxième ligne. Nous pouvons séparer les pistes de grille avec des gouttières, en utilisant les propriétés grid-row-gap et grid-column-gap.
.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px; /* three columns */
grid-template-rows: 150px 150px; /* two rows */
}Zones de la grille
Une zone de grille est composée de 1 ou plusieurs cellules de grille et est liée par 4 lignes de grille de chaque côté de la zone de grille. Vous pouvez vous référer à une zone de grille en utilisant ses lignes de grille de délimitation ou son nom tel que défini par la propriété grid-template-areas. L’élément de grille peut ensuite être affecté à la zone de grille avec les propriétés de grille (grid-placement) comme zone de grille (grid-area), ligne de grille (grid-row) , colonne de grille (grid-column) ou leurs équivalents long-form.
.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px; /* three columns */
grid-template-rows: 150px 150px; /* two rows */
grid-template-areas: "a b b"
"a b b";
}
.item-1 {
grid-area: a;
}
.item-2 {
grid-area: b;
}La partie ombrée du diagramme est la gouttière entre les pistes de la grille, comme mentionné précédemment, qui peut être contrôlé avec les propriétés grid-row-gap et grid-column-gap (Voir ci-dessous).
Et ainsi, en mettant tout ensemble:
