`gap (row-gap, column-gap)` în CSS

Setează distanța dintre elementele copil dintr-un container Flexbox sau Grid, fără a adăuga spațiu la margini.

Sintaxă CSS

gap: 16px;              /* spațiu egal între linii și coloane */
gap: 20px 10px;         /* 20px rânduri (row-gap), 10px coloane (column-gap) */
row-gap: 24px;
column-gap: 16px;

Ce face `gap (row-gap, column-gap)`

gap a rezolvat definitiv problema istorică a spațierii. Înainte, trebuia să pui margin-right pe fiecare element și să o anulezi pe ultimul cu :last-child.

Cu gap, spațiul apare strict între elementele vecine, fără a lăsa spațiu inutil la marginea exterioară a containerului. Funcționează identic atât în Flexbox, cât și în CSS Grid.

Valori uzuale

Valoare	Descriere
`dimensiune (px, rem)`	Mărimea spațiului dintre elemente.
`row-gap`	Distanța pe verticală dintre rânduri.
`column-gap`	Distanța pe orizontală dintre coloane.

Exemple

Exemplul 1: Spațiere impecabilă a unei grile de carduri

gap pune spațiu doar între carduri, fără a ieși din marginea containerului.

.grila-carduri {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  flex: 1 1 300px; /* ocupă cel puțin 300px */
}

Efect vizual în browser

Toate cardurile sunt despărțite printr-un spațiu aerisit de 24px, fără bătăi de cap cu margini pe ultimul element.

Greșeli frecvente

Combinarea inutilă a lui gap cu margin pe elementele copil, ceea ce dublează spațiul dintre ele.

Comenzi înrudite

display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.
flex-wrap: Controlează dacă elementele flex sunt forțate să stea pe o singură linie sau au voie să treacă pe rânduri noi.

Ce face gap (row-gap, column-gap)