auto-fit e auto-fill con minmax(): griglie responsive senza media query

Una griglia responsive non deve sempre dipendere da una lista di breakpoint. Con CSS Grid puoi dire al browser: “crea tutte le colonne che ci stanno, ma non farle diventare troppo strette”.

La combinazione più usata è:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Questa singola riga produce una griglia che:

1. crea colonne larghe almeno 250px;
2. usa 1fr per distribuire lo spazio rimasto;
3. manda gli elementi a capo quando non c’è più spazio.

Il ruolo di minmax()

minmax(minimo, massimo) definisce il limite inferiore e superiore di una traccia.

grid-template-columns: repeat(3, minmax(200px, 1fr));

Qui ogni colonna non dovrebbe scendere sotto 200px, ma può crescere fino a occupare una frazione dello spazio disponibile.

Da sola, questa regola crea sempre tre colonne. Se lo schermo è troppo stretto, può ancora creare overflow.

Il ruolo di auto-fit

auto-fit dice al browser di creare automaticamente il numero di colonne che riesce a far stare nel contenitore.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Se il contenitore è largo circa 800px, possono stare tre colonne da almeno 250px più i gap. Se diventa largo 500px, ne staranno due o una, senza scrivere una media query.

auto-fit vs auto-fill

La differenza si nota quando c’è spazio per più colonne di quanti elementi reali hai.

Con auto-fit, le tracce vuote collassano e gli elementi presenti si allargano:

.cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Con auto-fill, il browser mantiene anche le tracce vuote:

.cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

In un elenco di card, auto-fit è spesso la scelta più naturale: poche card si allargano per riempire la riga. auto-fill è utile quando vuoi preservare la struttura della griglia anche se alcune celle sono vuote.

Quando usarlo

Usa questa tecnica per:

• portfolio di progetti;
• griglie di prodotti;
• gallerie di immagini;
• card di articoli;
• liste di feature.

Non sostituisce tutte le media query. Se devi cambiare navigazione, gerarchia tipografica o struttura generale della pagina, una media query resta lo strumento giusto.

Esercizio

Parti da otto card e applica:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

Apri i DevTools, restringi la viewport e osserva quando la griglia passa da quattro colonne a tre, poi a due, poi a una. Il breakpoint non lo hai scritto tu: lo ha determinato il contenuto minimo della card.