CSS grid-gap-Eigenschaft

Definition und Verwendung

Die grid-gap-Eigenschaft definiert die Größe der Abstände zwischen den Zeilen und Spalten im Rasterlayout und ist eine Abkürzung für die folgenden Eigenschaften:

Hinweis:Diese Eigenschaft wurde in CSS3 in gap.

Weitere Informationen:

CSS-Tutorial:CSS-Grid-Layout

CSS-Referenzhandbuch:grip-row-gap-Eigenschaft

CSS-Referenzhandbuch:grip-column-gap-Eigenschaft

Beispiel

Beispiel 1

Die Kürzel für den Abstand zwischen Zeile und Spalte auf 50 Pixel setzen:

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

Versuchen Sie es selbst

Beispiel 2

Den Abstand zwischen den Zeilen auf 20 Pixel und den Abstand zwischen den Spalten auf 50 Pixel einstellen:

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

Versuchen Sie es selbst

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
grid-row-gap Die Größe der Abstände zwischen den Zeilen im Rasterlayout einstellen. Standardwert ist 0.
grid-column-gap Die Größe der Spaltenabstände einstellen. Standardwert ist 0.

Technische Details

Standardwert: 0 0
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe auch:Animationsspezifische Eigenschaften.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridGap="50px 100px"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

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