gap: spaziatura uniforme senza margini

Prima dell’invenzione della proprietà gap, distanziare gli elementi all’interno di una riga Flexbox era un lavoro ingrato. Dovevi dare un margin-right a tutti gli elementi, ma poi l’ultimo elemento spingeva contro il bordo destro del contenitore. Quindi dovevi usare la pseudo-classe :not(:last-child) per rimuovere il margine all’ultimo elemento. Un disastro di codice.

Oggi, per fortuna, abbiamo la proprietà gap.

Come funziona gap

gap è una proprietà che applichi al Genitore (Container), non ai figli. Definisce la dimensione esatta dei “canali” o spazi vuoti che si trovano tra gli elementi.

La cosa meravigliosa è che gap crea spazio solo in mezzo agli elementi, e non aggiunge spazio extra all’esterno prima del primo elemento o dopo l’ultimo!

.lista-pulsanti {
  display: flex;
  gap: 20px; /* Crea esattamente 20px di vuoto tra un pulsante e l'altro */
}

Controllo orizzontale e verticale

Quando usi flex-wrap: wrap e hai un layout su più righe, puoi fornire due valori a gap: Il primo valore controlla la spaziatura verticale (tra le righe), il secondo quella orizzontale (tra le colonne).

.galleria {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 15px; /* 30px spazio verticale, 15px spazio orizzontale */
}

Se vuoi essere più esplicito o controllare solo un asse, puoi usare:

• row-gap: 30px; (spazio solo verticale)
• column-gap: 15px; (spazio solo orizzontale)

Dove funziona gap?

La proprietà gap è nata originariamente per CSS Grid (e per un po’ di tempo si chiamava grid-gap), ma oggi i browser l’hanno estesa per funzionare perfettamente sia nei contenitori display: flex che in quelli display: grid.

Consiglio d’oro: Quando costruisci componenti affiancati, evita sempre di usare i margini sui figli per distanziarli. Imposta il genitore su display: flex e applica un bel gap. Il tuo codice sarà 10 volte più pulito e meno incline a rompersi!