Atrybut CSS grid-gap

Definicja i użycie

Atrybut grid-gap definiuje rozmiar przerwy między wierszami a kolumnami w układzie siatki, jest to skrócona wartość następujących atrybutów:

Uwaga:Ta właściwość w CSS3 została zmieniona na gap.

Zobacz również:

Tutorial CSSCSS układ siatki

Podręcznik CSSAtrybut grip-row-gap

Podręcznik CSSAtrybut grip-column-gap

Przykład

Przykład 1

Ustaw skróconą wartość między wierszami a kolumnami na 50 pikseli:

.grid-container {
  grid-gap: 50px;
}

Spróbuj sam

Przykład 2

Ustaw rozkład wierszy na 20 pikseli, rozkład kolumn na 50 pikseli:

.grid-container {
  grid-gap: 20px 50px;
}

Spróbuj sam

Gramatyka CSS

grid-gap: grid-row-gap grid-column-gap;

Wartość atrybutu

Wartość Opis
grid-row-gap Ustaw rozmiar rozkładu wierszy w sieci. Domyślna wartość to 0.
grid-column-gap Ustaw rozmiar rozkładu kolumn. Domyślna wartość to 0.

Szczegóły techniczne

Domyślna wartość: 0 0
Dziedziczenie: nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: Moduł układu siatki CSS Grid Level 1
Gramatyka JavaScript: object.style.gridGap="50px 100px"

Obsługa przeglądarki

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44