Unités spécifiques à grid¶
Unité fr¶
Afin de simplifier la gestion des colonnes et des rangées, une nouvelle
unité CSS a vu 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.
Exemple : trois colonnes identiques :
grid-template-columns: 1fr 1fr 1fr;
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, elles
peuvent être utilisées avantageusement avec les propriétés de type
gap.
Comparaison : - Avec column-gap: 5px, des éléments en % vs en
fr n'allouent pas l'espace de la même manière.
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.
Combinaison avec des unités différentes (px, vw, 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 partagent 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 50px. À gauche, on remarque que la combinaison
avec des pourcentages produit un résultat indésirable, tandis
qu'à droite, les fractions se partagent équitablement 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.
Unité 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 retrouvent trop coincés.
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 - minmax by TIM Montmorency (@tim-momo) on CodePen.
En savoir plus sur l'unité minmax()
Unité repeat()¶
Spécifier individuellement chaque colonne ou rangée n'est pas un problème lorsqu'une grille est de dimension modeste. Cependant, lorsqu'une grille grossit, il peut devenir rapidement lassant et mêlant d'écrire la dimension de chaque colonne ou rangée, surtout si celle-ci est identique.
Exemple verbeux :
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
pourrait être racourci avec repeat() ainsi:
grid-template-columns: repeat(6, 1fr);
repeat avec auto-fit ou 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().
Exemple avec auto-fit :
grid-template-columns: repeat(auto-fit, 150px);
Permet d'afficher autant d'éléments sur une rangée qu'il y a d'espace disponible.
Note
Différence :
- auto-fit : aucune cellule vide supplémentaire n'est ajoutée dans la grille, même si l'espace le permet.
- auto-fill : des cellules vides sont créées pour occuper l'espace.
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.
Exemple :
grid-template-columns: repeat(3, minmax(150px, 1fr));
See the Pen Grid - repeat by TIM Montmorency (@tim-momo) on CodePen.