Mise en page en Grille - Concepts et Terminologie

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.

Si vous avez utilisé Flexbox avant, vous pouvez remarquer une similitude en termes d’utilisation, qui fonctionne sur la base d’un conteneur parent et de ses éléments enfants. Dans ce cas, nous nous référerons au conteneur parent comme grid container  et ses éléments enfants comme grid items.

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.

Lignes de grille

.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 coding

.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.

Une cellule de grille est l’espace entre 2 lignes de grille de ligne adjacentes et 2 lignes de grille de colonne adjacentes. Il est conceptuellement similaire à une cellule de table, car c’est l’unité unique de votre grille. Le diagramme ci-dessous met en évidence la cellule de grille entre les lignes de grille de troisième et quatrième colonne et les lignes de grille de deuxième et troisième rangées.
Mise en page Grilles Css
.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.

Zones de la grille

.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:

gouttière entre pistes de l grille

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.