grid-template-columns e grid-template-rows

Definire una griglia scrivendo 1fr 1fr 1fr 1fr 1fr diventa presto noioso e difficile da leggere. CSS Grid fornisce diverse funzioni integrate per rendere la scrittura delle righe e delle colonne molto più efficiente.

1. La funzione repeat()

La funzione repeat() fa esattamente quello che suggerisce il nome: ripete un pattern per un determinato numero di volte.

Accetta due argomenti:

1. Quante volte ripetere.
2. Cosa ripetere (la dimensione).

/* Invece di scrivere: 1fr 1fr 1fr 1fr */
.galleria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Puoi anche ripetere pattern misti! 
   Questo crea: 100px 1fr 100px 1fr */
.complesso {
  grid-template-columns: repeat(2, 100px 1fr);
}

2. La funzione minmax()

Cosa succede se vuoi che una colonna sia flessibile (es. 1fr), ma vuoi assicurarti che non diventi mai troppo stretta schiacciando il testo all’interno?

La funzione minmax() ti permette di definire una larghezza minima e una larghezza massima.

.griglia {
  display: grid;
  /* Le 3 colonne si divideranno lo spazio equamente (1fr), 
     Nessuna colonna scende sotto 200px. */
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

3. Responsive automatico: auto-fit e auto-fill

Questa combinazione permette di creare una griglia responsive che va a capo da sola senza introdurre subito una media query.

Invece di dire al browser “voglio 4 colonne”, gli diciamo “metti quante più colonne possibili (auto-fit), a patto che non siano più piccole di X”.

.card-container {
  display: grid;
  gap: 20px;
  
  /* Crea colonne fluide che vanno a capo da sole */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Come funziona repeat(auto-fit, minmax(250px, 1fr))?

• Il browser prova a inserire quante più colonne da 250px ci stanno nello schermo.
• Se avanza spazio, usa 1fr per allargare le colonne e riempire la riga.
• Se l’utente restringe lo schermo, per esempio a 400px, il browser capisce che due colonne da 250px non ci stanno (500px > 400px), quindi manda a capo gli elementi e lascia una singola colonna fluida.

Esercizi

Base · facile

Riscrivi grid-template-columns: 1fr 1fr 1fr 1fr in forma più compatta con repeat().

grid-template-columns: repeat(4, 1fr);

Intermedio · medio

Crea tre colonne flessibili che non scendano mai sotto 200px usando repeat() + minmax(). Spiega cosa succede se la somma dei minimi supera la larghezza del contenitore.

Sfida · difficile

Analizza repeat(auto-fit, minmax(250px, 1fr)): descrivi passo per passo come il browser decide il numero di colonne man mano che la viewport si restringe da 900px a 300px, e spiega perché questo evita una serie di media query.