L'unità fr: frazioni dello spazio disponibile

Quando crei una griglia con grid-template-columns, puoi usare i pixel (px), ma il layout sarà rigido. Puoi usare le percentuali (%), ma dovrai fare calcoli matematici complessi se aggiungi dei gap (spazi) tra le colonne, perché le percentuali + gap supereranno il 100% della larghezza!

Per risolvere questo problema, CSS Grid ha introdotto il fractional unit (fr).

Cos’è l’fr?

1 fr rappresenta “una frazione dello spazio rimanente disponibile”.

Il browser guarda la larghezza del contenitore, sottrae eventuali spazi occupati da gap o da colonne fisse in px, e poi divide lo spazio rimanente in base al numero totale di “frazioni” (fr) che hai richiesto.

Esempio 1: colonne uguali

Se vuoi 3 colonne uguali, non serve scrivere 33.3333%.

.griglia {
  display: grid;
  /* Diciamo al browser: voglio 3 colonne, e ognuna si prende 1 parte del totale */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Il browser gestirà da solo la sottrazione dei 20px di gap e creerà 3 colonne identiche.

Esempio 2: Layout asimmetrici (Sidebar + Contenuto)

Vuoi una colonna di contenuto grande e una sidebar laterale più piccola?

.layout-blog {
  display: grid;
  /* La prima colonna prende 3 parti, la seconda prende 1 parte. Totale: 4 parti. */
  grid-template-columns: 3fr 1fr;
}

In questo caso, la prima colonna occuperà i 3/4 dello spazio visibile, e la sidebar occuperà 1/4.

Esempio 3: Misto Fisso + Fluido

L’fr diventa particolarmente utile quando lo mescoli con unità fisse (come i px).

Immagina di avere un menu laterale che deve essere sempre largo 250px, e un’area di contenuto che deve riempire tutto il resto dello schermo.

.dashboard {
  display: grid;
  /* Colonna 1: fissa a 250px. Colonna 2: prende il resto. */
  grid-template-columns: 250px 1fr;
}

Usare le unità fr riduce la necessità di calcoli manuali e aiuta a evitare lo scorrimento orizzontale causato da percentuali e gap gestiti male.