gap

Wartości

• jedna wartość – ten sam odstęp między rzędami i kolumnami, np. gap: 16px.
• dwie wartości – najpierw między rzędami, potem między kolumnami: gap: 8px 24px.
• długość albo procenty (z rozmiaru kontenera); wartości ujemne nie są dozwolone.
• normal – domyślnie: 0 we Flexboksie i Gridzie, 1em przy kolumnach tekstu.

Wartość początkowa: normal. Dziedziczona: nie. Dotyczy: kontenerów flex i grid, tekstu wielokolumnowego (columns).

Przykłady

Zawinięte elementy z odstępem 6 px między rzędami i 16 px między kolumnami:

<div class="flex">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex {
  flex-wrap: wrap;
  gap: 6px 16px;
  width: 220px;
}
.flex > div { width: 40px; }

Siatka kart z równymi odstępami:

<div class="grid">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 260px;
}
.grid div {
  padding: 10px;
  background: #eaf7ff;
}

Na co uważać

• We Flexboksie działa dopiero od Chrome 84, Firefoksa 63 i Safari 14.1 (2020–2021). W Gridzie przeglądarki obsługują ją dłużej – dane w sekcji o obsłudze w przeglądarkach dotyczą Grida.
• Na zwykły blok (bez display: flex lub grid) nie działa. Odstępy między akapitami robi się tam marginesami.
• Odstęp dolicza się do szerokości elementów: cztery elementy po 25% z gap nie zmieszczą się w jednym wierszu. Użyj flex: 1 albo w Gridzie jednostek fr.
• Starsza nazwa w Gridzie to grid-gap – przeglądarki nadal znają ją jako alias.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od października 2017, za szeroko dostępne uznawane od kwietnia 2020. Od wersji: Chrome 57, Firefox 52, Safari 10.1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
justify-content
margin
flex-wrap
grid-template-columns
columns