unité fr en CSS : la part d'espace qui reste

Une grille mélange souvent des colonnes de taille fixe, une barre latérale par exemple, avec des colonnes qui doivent se partager ce qu'il reste de l'espace disponible. C'est précisément le problème que résout l'unité fr : elle ne représente pas une taille absolue comme le pixel, mais une fraction de l'espace restant dans le conteneur de grille.

Le nom fr vient de fraction. Une valeur grid-template-columns: 1fr 2fr découpe l'espace restant en trois parts égales, et donne deux de ces parts à la seconde colonne. C'est une unité propre à CSS Grid, elle n'existe nulle part ailleurs en CSS.

Définition

fr est une unité de Unités CSS réservée à Grid, qui représente une fraction de l'espace disponible dans le conteneur, une fois les colonnes de taille fixe et les marges entre colonnes déjà retirées de ce calcul. Une colonne en 1fr grandit et rétrécit avec la taille du conteneur, contrairement à une colonne en pixels qui reste immobile.

Syntaxe et calcul de la répartition

.grille {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

Sur un conteneur de 1000 pixels, la première colonne prend ses 200 pixels fixes. Il reste 800 pixels à répartir entre les deux colonnes suivantes, au prorata de leurs valeurs fr : la deuxième colonne, avec 1fr sur un total de 3fr, obtient un tiers de 800, soit environ 267 pixels. La troisième, avec 2fr, obtient le double, soit environ 533 pixels.

fr contre pourcentage : une différence qui compte

Un pourcentage se calcule toujours sur la largeur totale du conteneur, sans tenir compte des autres colonnes ni de l'espacement entre elles. L'unité fr, elle, prend en compte cet espacement, le gap, et les colonnes fixes avant de répartir ce qui reste, ce qui évite un débordement que produirait un mélange maladroit de pourcentages et de pixels dont la somme dépasse 100 %.

fr et gap dans le même calcul

.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Sur un conteneur de 1000 pixels avec trois colonnes égales et un espacement de 20 pixels entre elles, les deux espaces retirent d'abord 40 pixels au total, soit 960 pixels restants à répartir en trois parts égales de 320 pixels chacune. L'unité fr effectue ce calcul automatiquement à chaque redimensionnement du conteneur, sans qu'aucune formule ne soit à écrire à la main.

C'est ce calcul intégré qui distingue vraiment fr d'un simple pourcentage divisé mentalement par le nombre de colonnes : dès qu'un gap ou une colonne fixe s'ajoute au mélange, un pourcentage calculé à la main devient rapidement faux, alors que fr reste toujours exact.

fr et le contenu incompressible

Une colonne en fr peut malgré tout être plus large que prévu si son contenu ne peut pas rétrécir davantage, une longue URL sans espace par exemple, ou une image avec une largeur minimale fixée. Dans ce cas, le contenu incompressible prend le pas sur la répartition théorique en fractions, et les autres colonnes se réajustent en conséquence.

Questions fréquentes

Non, l'unité fr n'a de sens que dans les propriétés grid-template-columns et grid-template-rows d'une grille. L'utiliser ailleurs, sur une largeur classique par exemple, n'a aucun effet reconnu par les navigateurs.

Non, sa valeur en pixels dépend entièrement de l'espace restant à répartir, qui change avec la taille du conteneur, le nombre d'autres colonnes fixes et la présence d'un gap. C'est justement ce qui rend fr utile pour des grilles fluides, sans avoir à recalculer une largeur à chaque changement de taille d'écran.

En donnant des valeurs différentes à chaque colonne, comme dans repeat() et minmax() ou une déclaration manuelle 1fr 2fr 1fr. Le rapport entre les valeurs détermine la répartition : une colonne à 2fr reçoit toujours le double d'une colonne à 1fr, quelle que soit la largeur totale disponible.