Il problema con le percentuali nei CSS

Assicurati che i tuoi layout siano pienamente reattivi con un'unità di misura alternativa.

Non molto tempo fa, dipendevamo completamente dall’utilizzo delle percentuali per larghezze e altezze. L'uso delle percentuali significava che il layout e gli elementi potevano assumere un'altezza e una larghezza in base al viewport. Ma poiché i CSS moderni continuano ad evolversi, siamo arrivati a un punto in cui potrebbe essere addirittura una buona idea evitare l’uso delle percentuali.

Scopri i problemi comuni che incontrerai quando utilizzi le percentuali. Scopri anche le moderne tecniche CSS da utilizzare al posto delle percentuali. Queste tecniche ti daranno lo stesso risultato delle percentuali senza nessuno degli inconvenienti.

Un esempio di griglia molto semplice

Per dimostrare un problema con le unità percentuali, considera questo layout HTML:

<div class="container my-grid">
  <div class="grid-item">
  </div>
  <div class="grid-item">
  </div>
</div>

L'elemento esterno è un elemento contenitore div di base con due figli div. Ogni bambino ha una classe elemento della griglia. Per trasformare il contenitore in una griglia con due colonne (due riquadri), dovremo applicare il seguente codice CSS:

body {
  background-color: black;
  align-items: center;
  justify-content: flex-start;
}
.my-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 3rem;
  border: 2px solid gold;
  padding: 1rem;
}
.grid-item {
  border: 3px solid gold;
  padding: 10rem 0;
  background: blue;
}

Quindi ogni colonna (elemento della griglia) ha un colore di sfondo dorato. Nella classe genitore del contenitore, impostiamo grid-template-column al 50% per ogni colonna. Di conseguenza, entrambi i riquadri occupano il 50% della larghezza totale dell'elemento contenitore.

Ecco il risultato:

Ma ci sono problemi con questo allineamento. Innanzitutto, se decidessi di aggiungere uno spazio alla griglia principale, la parte secondaria potrebbe fuoriuscire lateralmente. Ad esempio, se dovessi aggiungere gap: 3px al blocco .my-grid nel CSS, ecco come apparirebbe il layout:

Come puoi vedere nell'immagine sopra, la scatola di destra è stata spostata fuori dal contenitore. A volte potresti non notarlo perché il tuo spazio è abbastanza piccolo, provocando uno strano problema di allineamento. Ma se il divario fosse maggiore, la sovrapposizione diventerebbe abbastanza evidente.

Ogni volta che utilizzi percentuali e aggiungi margini o spazi, c'è un'enorme possibilità di riscontrare questo tipo di errori. Ma perché si verifica l'errore?

È perché ogni colonna rappresenta il 50% del genitore. Nell'esempio sopra, abbiamo il 50% più il 50% più lo spazio vuoto (3px), che spinge la scatola fuori dal contenitore.

Tieni presente che questo errore non si verifica solo con 50-50. È possibile impostare la prima colonna al 75%, la seconda colonna al 25% e l'errore continuerà a verificarsi. Questo è il motivo per cui è necessario utilizzare la seguente soluzione più spesso.

La soluzione con valori frazionari

La soluzione è utilizzare valori frazionari anziché percentuali. Quindi, invece di impostare la prima colonna al 75% e la seconda al 50%, puoi impostare la prima colonna su 3fr e la seconda colonna su 1fr:

grid-template-columns: 3fr 1fr

Ciò mantiene lo stesso rapporto del primo esempio. Ma il vantaggio di utilizzare le unità fr è che utilizzano una frazione dello spazio disponibile. In questo caso, la prima colonna occuperà tre parti dello spazio mentre la seconda colonna ne occuperà una parte, escluso lo spazio vuoto.

Un altro vantaggio dell'utilizzo di frs rispetto alle percentuali o ad altre unità assolute, come px o em, è che puoi combinarli con valori fissi. Ecco un esempio:

grid-template-columns: 1fr 10rem;

Con il codice sopra, otterrai un valore fisso che non cambia mai indipendentemente dalle dimensioni dello schermo. Questo perché la colonna a destra rimarrà sempre a 10rem mentre la colonna a sinistra occuperà lo spazio rimanente (meno lo spazio vuoto).

A volte puoi farla franca usando le percentuali. Ma devi usarli in modi intelligenti che possano comunque adattarsi alla situazione. Spesso ciò significa associarli a un valore fr.

Un esempio più realistico

Immaginiamo di avere una pagina che comprende l'area del contenuto principale e una parte (per i post correlati). L'area del contenuto principale occupa tre frazioni dello schermo mentre quella laterale occupa lo spazio rimanente meno lo spazio vuoto:

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem;
}
.card {
  background-color: #5A5A5A;
  padding: 10px;
  margin-bottom: .5rem;
}

Ecco il risultato:

In genere, sposti la barra laterale (o di lato) nella parte inferiore (o superiore) della pagina quando lo schermo diventa troppo stretto. Ciò significa impostare query multimediali che impilano tutto uno sopra l'altro quando il viewport raggiunge un determinato punto di interruzione.

Ecco come puoi impilare tutto in una colonna quando il viewport raggiunge 55em o meno:

@media(max-width: 55em) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

E il risultato sarà simile a questo:

Ora non vuoi che ogni scheda si estenda per la larghezza dell'intera finestra. Piuttosto le carte dovrebbero essere visualizzate una accanto all'altra. Il modo migliore per raggiungere questo obiettivo è utilizzare le griglie CSS. Ma invece di impostare valori di larghezza fissi (come il 50%) per la colonna del modello di griglia, utilizza la funzione repeat() come segue:

.sidebar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    align-content: start;
    gap: 2rem;
}

Questo CSS imposta una dimensione minima di 25rem e una dimensione massima di 1fr. Questo approccio è molto migliore rispetto all'impostazione di larghezze fisse perché si basa sul dimensionamento intrinseco. In altre parole, consente al browser di capire le cose in base ai parametri disponibili.

Ora, quando riduci la finestra del browser a una larghezza specifica, la casella della griglia si riadatta automaticamente a due caselle per riga.

Quando lo schermo diventa più piccolo, si riduce a una casella per riga. Quindi il browser impila tutto uno sopra l'altro. Tutto questo accade quando ridimensioni la finestra. Puoi utilizzare una funzionalità del browser come Chrome DevTools per capire come funziona questo CSS e come il ridimensionamento delle finestre modifica il layout.

La parte migliore è che non hai bisogno di una query sul contenitore o di qualcosa di particolare per rendere l'elemento reattivo. Imposta semplicemente una griglia e utilizza min-max() per impostare valori frazionari anziché dimensioni fisse.

Ulteriori informazioni sulla griglia CSS

Se vuoi essere bravo con i CSS, devi avere una conoscenza approfondita delle griglie CSS. Le griglie possono essere piuttosto potenti se usate bene. Puoi ottenere quasi tutti i layout che desideri utilizzando le griglie. Questo lo rende uno strumento indispensabile nei CSS.

Una cosa da tenere a mente quando si utilizzano le griglie CSS è concentrarsi sulla reattività. Puoi anche utilizzare l'approccio frazionario per evitare casi di collisioni tra elementi. Ricorda di padroneggiare le griglie CSS perché lo stile di layout ti aiuterà immensamente durante la creazione di siti Web.