CSS gap-Eigenschaft

Definition und Verwendung

Die Eigenschaft gap definiert die Größe der Lücken zwischen Zeilen und Spalten in Flexbox, Gitter oder mehrspaltigem Layout. Es ist eine Abkürzung für die folgenden Eigenschaften:

Hinweis:Die Eigenschaft gap wurde früher als grid-gap.

Weitere Informationen:

CSS-Tutorial:CSS Gitterlayout

CSS-Tutorial:CSS Flexbox-Layout

CSS-Tutorial:CSS Mehrspaltigkeitslayout

CSS Referenzhandbuch:row-gap-Eigenschaft

CSS Referenzhandbuch:column-gap-Eigenschaft

Beispiel

Beispiel 1

Stellen Sie den Abstand zwischen Zeilen und Spalten auf 50px ein:

.grid-container {
  gap: 50px;
}

Probieren Sie es selbst aus

Beispiel 2: Gitter-Layout

Stellen Sie in einem Gitter-Layout den Abstand zwischen den Zeilen auf 20px und den Abstand zwischen den Spalten auf 50px ein:

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

Probieren Sie es selbst aus

Beispiel 3: Flexbox-Layout

Stellen Sie in einem Flexbox-Layout den Abstand zwischen den Zeilen auf 20px und den Abstand zwischen den Spalten auf 70px ein:

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

Probieren Sie es selbst aus

Beispiel 4: Mehrspaltiges Layout

Stellen Sie in einem mehrspaltigen Layout den Abstand zwischen den Spalten auf 50px ein:

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

Probieren Sie es selbst aus

CSS-Syntax

gap: row-gap column-gap|initial|inherit;
Wert Beschreibung
row-gap Legen Sie die Größe der Lücken zwischen den Zeilen in Gitter oder Flexbox-Layout fest.
column-gap Legen Sie die Größe der Lücken zwischen den Spalten in Gitter, Flexbox oder mehrspaltigem Layout fest.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: normal normal
Vererbung: Nein
Animation herstellen: Unterstützt. Bitte siehe separate Eigenschaften. Siehe:Attribute zur Animation.
Version: CSS Box Alignment Module Level 3
JavaScript-Syntax: object.style.gap="50px 100px"

Browser-Unterstützung

Die Nummern in der Tabelle geben die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Layout Chrome IE / Edge Firefox Safari Opera
In Gitter 66 16 61 12 53
In Flexbox 84 84 63 14.1 70
In Spalten 66 16 61 Nicht unterstützt 53