CSS grid-gapEigenschaft

Beispiel

Legen Sie den Abstand zwischen Zeilen und Spalten auf 50px fest:

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

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.

Eigenschaft
grid-gap	57	16	52	10	44

Die grid-gap-Eigenschaft wird verwendet, um den Abstand zwischen Grid-Zeilen und -Spalten festzulegen.

Hinweis:grid-gap ist die Kurzform von row-gap und column-gap.

Standardwert:	0 0
Vererbt:	nein
animation:	Supported.Mehr erfahren überanimierbar Probieren Sie es selbst aus
Version:	CSS Grid Layout Module Level 1
JavaScript-Syntax:	object.style.gridGap="50px 100px" Selbst ausprobieren

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

Wert	Beschreibung
grid-row-gap	Legt die Größe des Abstands zwischen Zeilen im Grid-Layout fest. Der Standardwert ist 0.
grid-column-gap	Legt die Größe des Abstands zwischen Spalten im Grid-Layout fest. Der Standardwert ist 0.

Das folgende Beispiel setzt den Grid-Zeilenabstand auf 20px und den Spaltenabstand auf 50px:

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