Grid

Tout comme flexbox, la propriété display: grid;, ou sa variante display: inline-grid;, influence l'affichage de ses enfants. Cependant, contrairement à flexbox qui les positionne en fonction d'une seule dimension (x ou y), grid permet de les positionner sur une grille quadrillée en deux dimensions (x & y).

grid-template-columns

Permets de définir indépendamment la taille de chaque colonne d'une grille. Le nombre de colonnes correspond au nombre de valeurs spécifiées.

Par exemple, trois valeurs produisent trois colonnes:

grid-template-rows

Permets de définir indépendamment la taille de chaque rangée d'une grille. Le nombre de rangées correspond au nombre de valeurs spécifiées.

Par exemple, deux valeurs produisent deux rangées:

column-gap, row-gap & gap

Les propriétés column-gap, row-gap et gap permettent de définir des espaces entre les cellules d'une grille. Ces propriétés acceptent toutes les unités de base.

column-gap

La propriété column-gap permet de définir l'espace entre les colonnes d'une grille.

row-gap

La propriété row-gap permet de définir l'espace entre les rangées d'une grille.

gap

La propriété gap permet de définir l'espace entre les colonnes et rangées d'une grille simultanément.

Cette propriété accepte aussi de recevoir deux valeurs. Le cas échéant, la première correspond à l'espace entre les rangées et la deuxième, à celle entre les colonnes.

Par exemple:

gap: 10px 50px;

Génère un espace de 10px entre les rangées ↕️ et de 50px entre les colonnes ↔️.

fr

Afin de simplifier la gestion des colonnes et des rangées une nouvelle unité CSS vue le jour. Cette unité, intitulée fr pour fraction, permet de distribuer l'espace disponible de façon relative entre chaque élément ayant une valeur de ce type.

Par exemple, pour avoir trois colonnes identiques, il serait possible de faire:

grid-template-columns: 1fr 1fr 1fr;

Combinaison avec gap

À priori, cette unité peut sembler similaire aux pourcentages (%). Cependant, puisque les fractions basent leurs calculs sur l'espace disponible et non l'espace total de leur parent, ils peuvent-être utiliser avantageusement avec les propriétés de type gap.

Par exemple, si un column-gap: 5px est présent sur des éléments en pourcentages à gauche versus en fractions à droite.

Combinaison avec unités tierce

Lorsqu'une unité tierce est introduite, les pourcentages continuent de se baser sur la dimension totale du parent, peu importe la dimension prise par cette unité, contrairement aux fractions qui se séparent l'espace disponible restant après que l'unité tierce est prise son espace.

Dans les exemples ci-dessous👇, la première colonne à une unité tierce de 50px. À gauche, on remarque que la combinaison avec des pourcentages produit un résultat indésirable, tandis qu'à droite, les fractions séparent également l'espace restant, produisant ainsi un résultat harmonieux.

minmax()

Comme son nom l'indique, l'unité minmax() permet de définir une dimension minimale et maximale à une cellule de grille. Cette unité est particulièrement utile afin de créer une mise en page responsive tout en évitant que certains éléments se retrouve trop coincés.

Par exemple, deux grilles identiques avec toutes les cellule d'une largeur de 1fr à l'exception de la 2^e cellule verte ayant une valeur de minmax(200px, 1fr).

repeat

Spécifier individuellement chaque colonne ou rangée n'est pas un problème lorsqu'une grille est de dimension relativement modeste. Cependant, lorsqu'une grille grossie, il peut devenir rapidement lassant et mélangeant d'écrire la dimension de chaque colonne ou rangée, surtout si celle-ci est identique.

Par exemple:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

Pour palier à cet enjeu, la commande repeat() fut créée.

L'exemple précédent pourrait donc être réécris ainsi:

grid-template-columns: repeat(6, 1fr);

auto-fit & auto-fill

Afin de pouvoir réaliser une grille responsive sans avoir à écrire une multitude de media queries, il est possible d'utiliser les valeurs auto-fit et auto-fill à la place d'un nombre spécifique de colonnes dans un repeat().

Par exemple avec auto-fit,

grid-template-columns: repeat(auto-fit, 150px);

Permets d'afficher autant d'éléments sur une rangée qu'il y a d'espace disponible.

La différence entre auto-fit et auto-fill étant la gestion de l'espace vide restant. Avec auto-fit, aucune cellule vide supplémentaire n'est ajoutée dans la grille, même si l'espace le permet, alors qu'avec auto-fill des cellules vides sont créées. Dans la majorité des cas, le résultat sera similaire. Cependant, cette particularité peut parfois s'avérer utile lorsque combinée avec d'autres propriétés de grille.

Combinaison avec d'autres unités

Il est aussi possible de combiner repeat() avec d'autres unités.

Par exemple:

Inspecteur

L'inspecteur est d'une aide précieuse lorsque l'on manipule les éléments en grid. Dans le DOM tree, les éléments en display: grid; ou display: inline-grid; sont mis en évidence grâce à un badge contenant le mot "grid". Lorsque cliqué, ce badge met en surbrillance les divisions constituant la grille en question.

Dans l'onglet layout, il est possible d'afficher des informations supplémentaires. Notamment, étendre les divisions afin de les rendre plus visibles, afficher la taille des colonnes et rangées, etc.