Atrybut gap w CSS

Definicja i użycie

Atrybut gap definiuje rozmiar przestrzeni między wierszami i kolumnami w układzie flexbox, sieci lub wielokolumnowym. Jest to skrócona nazwa następujących atrybutów:

Uwaga:Atrybut gap był wcześniej nazywany grid-gap.

Zobacz również:

Tutorial CSSLayout sieci CSS

Tutorial CSSLayout ramki elastycznej CSS

Tutorial CSSUkład wielokolumnowy CSS

Podręcznik CSSAtrybut row-gap

Podręcznik CSSAtrybut column-gap

Przykład

Przykład 1

Ustaw odległość między wierszami i kolumnami na 50px:

.grid-container {
  gap: 50px;
}

Spróbuj sam

Przykład 2: Układ sieci

Ustaw odległość między wierszami na 20px, a między kolumnami na 50px w układzie sieci:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Spróbuj sam

Przykład 3: Układ ramki elastycznej

Ustaw odległość między wierszami na 20px, a między kolumnami na 70px w układzie ramki elastycznej:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Spróbuj sam

Przykład 4: Układ wielokolumnowy

Ustaw odległość między kolumnami w układzie wielokolumnowym na 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Spróbuj sam

Gramatyka CSS

gap: row-gap column-gap|initial|inherit;
Wartość Opis
row-gap Ustaw rozmiar przestrzeni między wierszami w układzie siatki lub ramce elastycznej.
column-gap Ustaw rozmiar przestrzeni między kolumnami w układzie siatki, ramce elastycznej lub wielokolumnowym.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dochodzi do tej właściwości od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślne wartości: normal normal
Inherencja: Nie
Tworzenie animacji: Obsługiwane. Zobacz oddzielne atrybuty. Zobacz:Atrybuty związane z animacją.
Wersja: Moduł wyrównania pudełek CSS poziom 3
Gramatyka JavaScript: object.style.gap="50px 100px"

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która obsługuje tę właściwość w pełni.

Układ Chrome IE / Edge Firefox Safari Opera
W sieci 66 16 61 12 53
W ramce elastycznej 84 84 63 14.1 70
W wielokolumnowym 66 16 61 Nie obsługuje 53