gap, column-gap, row-gap

In CSS Grid, gap definisce lo spazio tra le tracce della griglia: righe e colonne.

È una proprietà del contenitore, non dei singoli elementi. Questo è il suo vantaggio principale: lo spazio appartiene al layout, non alle card.

.griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

Con questa regola ottieni 1.5rem tra tutte le colonne e tra tutte le righe.

row-gap e column-gap

Se vuoi controllare separatamente i due assi, puoi usare:

.griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 2rem;
  column-gap: 1rem;
}

row-gap controlla lo spazio tra una riga e l’altra.
column-gap controlla lo spazio tra una colonna e l’altra.

La shorthand equivalente è:

.griglia {
  gap: 2rem 1rem;
}

Il primo valore è il row-gap, il secondo è il column-gap.

Perché non usare margin sulle card

Con i margini sugli elementi figli, devi gestire eccezioni:

.card {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

Poi però l’ultima colonna crea spazio esterno indesiderato, l’ultima riga crea un fondo irregolare e devi aggiungere selettori speciali.

Con gap, il browser mette spazio solo tra le celle, senza aggiungerlo ai bordi esterni della griglia.

Gap e dimensioni delle colonne

In Grid il gap viene sottratto dallo spazio disponibile prima di distribuire le colonne flessibili.

.griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

Il browser prende la larghezza del contenitore, sottrae i due spazi da 2rem tra le tre colonne e divide il resto in tre parti uguali. Questo è uno dei motivi per cui fr e gap funzionano meglio delle vecchie griglie a percentuali.

Esercizio

Crea una griglia di sei card:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Poi cambia in:

.cards {
  row-gap: 2rem;
  column-gap: 0.75rem;
}

Osserva nei DevTools che la dimensione delle card cambia in base allo spazio sottratto dai gap.