Introduzione all'unità fr

Per realizzare layout che si adattano fluidamente a qualsiasi dimensione dello schermo, l'unità fr rappresenta uno strumento potente a disposizione. L'unità fr (frazione) in CSS Grid consente di assegnare una porzione dello spazio disponibile alle tracce della griglia. A differenza delle unità fisse come px o %, l'unità fr distribuisce lo spazio in modo dinamico, garantendo che la griglia rimanga flessibile e reattiva.

Se si impostano le colonne della griglia su 1fr 2fr, la prima colonna riceve una parte dello spazio disponibile e la seconda colonna ne riceve due, indipendentemente dalla larghezza complessiva della griglia. Questo rende l'unità fr fondamentale per creare layout che si adattano elegantemente senza necessità di regolazioni manuali.

Funzionamento di minmax() e casi d'uso

La funzione minmax() consente di definire un intervallo di dimensioni per una traccia della griglia specificando sia un valore minimo che uno massimo. Questo approccio è fondamentale per il design responsivo, poiché impedisce che le tracce della griglia diventino troppo piccole per essere leggibili o troppo larghe per mantenere un layout equilibrato.

• Utilizzare minmax(min, max) per impostare un limite inferiore e superiore alle dimensioni di colonne o righe;
• Garantire la leggibilità dei contenuti impostando un valore minimo adeguato;
• Consentire alle tracce di espandersi e riempire lo spazio disponibile abbinando minmax() alle unità fr;
• Mantenere layout flessibili e usabili su tutte le dimensioni di schermo.

Ad esempio, minmax(150px, 1fr) assicura che una colonna non si riduca mai sotto i 150px ma possa crescere quanto lo spazio disponibile lo consente. Applicare minmax() quando si desidera che immagini, card o blocchi di contenuto rimangano leggibili e visivamente bilanciati, sfruttando al contempo la distribuzione dinamica dello spazio.