Gap per Spaziatura in Flex e Grid
La proprietà gap definisce lo spazio tra elementi in container Flexbox e Grid.
Sintassi
.flex-container {
display: flex;
gap: 20px; /* Spazio uguale tra tutti gli elementi */
}
.grid-container {
display: grid;
gap: 20px 30px; /* row-gap column-gap */
}Proprietà separate
.container {
row-gap: 20px; /* Spazio tra righe */
column-gap: 30px; /* Spazio tra colonne */
}Vantaggi rispetto a margin
- Non serve calcolare margini su primo/ultimo elemento
- Funziona automaticamente con wrap
- Codice più pulito e manutenibile
/* Invece di */
.item { margin-right: 20px; }
.item:last-child { margin-right: 0; }
/* Usa */
.container { gap: 20px; }