GridTout 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).
Pour commencer, vous devez définir un élément conteneur comme une grille avec
display : grid,
définir la taille des colonnes et des lignes avec
grid-template-columns et grid-template-rows,
puis placer ses éléments enfants dans la grille avec
grid-column et grid-row.
Comme dans le cas de flexbox, l'ordre source des éléments de la grille n'a pas d'importance. Votre CSS peut les placer dans n'importe quel ordre, ce qui facilite grandement la réorganisation de votre grille à l'aide de requêtes média. Imaginez que vous définissiez la disposition de votre page entière, puis que vous la réorganisiez complètement pour l'adapter à une largeur d'écran différente, le tout avec seulement quelques lignes de CSS. La grille est l'un des modules CSS les plus puissants jamais introduits.
Permet de définir 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:
See the Pen GSAP - Timeline - GSDevTools by TIM Montmorency (@tim-momo) on CodePen.
Permet de définir 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:
See the Pen Grid - grid-template-columns by TIM Montmorency (@tim-momo) on CodePen.
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.
See the Pen Grid - grid-template-rows by TIM Montmorency (@tim-momo) on CodePen.
row-gap
La propriété row-gap permet de définir l'espace entre les rangées d'une grille.
See the Pen Grid - column-gap by TIM Montmorency (@tim-momo) on CodePen.
gap
La propriété gap permet de définir l'espace entre les colonnes et rangées d'une grille simultanément.
See the Pen Grid - row-gap by TIM Montmorency (@tim-momo) on CodePen.
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:
Génère un espace de 10px entre les rangées ↕️ et de 50px entre les colonnes ↔️.
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:
Combinaison avec gap
À priori, cette unité peut sembler similaire aux pourcentages (%). Cependant, puisque les fractions (fr) 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.
See the Pen Grid - % vs fr gap by TIM Montmorency (@tim-momo) on CodePen.
See the Pen Grid - gap by TIM Montmorency (@tim-momo) on CodePen.
Combinaison avec unités différentes, telles que px ou vw ou vh etc.
Lorsqu'une unité différente est ajoutée en combinaison, les pourcentages (%) continuent de se baser sur la dimension totale du parent, peu importe la dimension prise par cette unité. Contrairement aux fractions (fr) qui se séparent l'espace disponible restant après que l'unité différente ait pris son espace.
Dans les exemples ci-dessous👇, la première colonne a une unité différente (px), soit 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.
See the Pen Grid - % vs fr gap by TIM Montmorency (@tim-momo) on CodePen.
See the Pen Grid - % vs fr gap by TIM Montmorency (@tim-momo) on CodePen.
exercice 01 gridComme 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 cellules d'une largeur de 1fr à l'exception de la 2e cellule verte ayant une valeur de minmax(400px, 1fr).
See the Pen Grid - % vs fr by TIM Montmorency (@tim-momo) on CodePen.
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 grossit, 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:
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,
Permet 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:
See the Pen Grid - % vs fr gap by TIM Montmorency (@tim-momo) on CodePen.
See the Pen Grid - % vs fr by TIM Montmorency (@tim-momo) on CodePen.
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.