CSS/Eigenschaften/Abstand/gap

Im Mehrspaltenlayout wie im Grid-Layout, bei Flexbox oder auch columns besteht oft der Wunsch nach einer Gestaltung der Zwischenräume (engl. gutter) zwischen Spalten bzw. Zeilen. Sie können Rasterelementen mit margin einen Abstand zu den anderen Zellen geben - dieser Abstand besteht dann aber auch am Rand des Grid-Containers. Deshalb wurde die Eigenschaft grid-gap mit den Eigenschaften grid-row-gap und grid-column-gap eingeführt, die Zwischenräume (englisch: gutter) zwischen den einzelnen Rasterzellen ermöglichte. Am Rand schließen die Rasterelemente bündig mit dem Grid-Container ab.

Im Mehrspaltenlayout mit columns gab es bereits eine Eigenschaft namens column-gap, sodass die Eigenschaft im CSS Box Alignment Module Level 3 ohne Präfixe für Grid Layout, Flexbox und columns vereinheitlicht wurde.

column-gap

Mit der Eigenschaft column-gap können Sie für ein mehrspaltig anzuzeigendes Element den Abstand zwischen den Spalten bestimmen.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Erlaubt Werte:

• numerische Angabe (mit Ausnahme von Prozentwerten)
• auto: (Standardwert) weist die Browser an, einen „vernünftigen“ Wert (meist 1em) selbst zu wählen.

Beachten Sie: Die Flächen zwischen den Spalten sind immer transparent und lassen sich nicht gestalten.

Beispiel So sieht's aus

.mehrspaltig {
	column-count:         2;
	column-gap:         10em;
	padding: 1em;
    width: 35em;
    border: 1px solid;
}

Die beiden Spalten verteilen sich gleichmäßig auf die verfügbare Breite. Dabei wird der Abstand zwischen beiden durch column-gap auf 10em festgelegt.
Zur Visualisierung sind die Kindelemente des article-Elements der Klasse „mehrspaltig“ mit einem Hintergrund versehen.

So sieht's aus

row-gap

Mit der Eigenschaft row-gap können Sie bei Flexbox und im Grid Layout den vertikalen Abstand zwischen den Reihen bestimmen.

Erlaubt Werte:

• numerische Angabe (mit Ausnahme von Prozentwerten)
• auto: (Standardwert) weist die Browser an, einen „vernünftigen“ Wert (meist 1em) selbst zu wählen.

gap

Die Eigenschaft gap ist die zusammenfassende Eigenschaft der Eigenschaften row-gap und column-gap.

Sie erwartet zwei Werte:

• Längenangabe für den Abstand zwischen den Reihen (row-gap)
• (optionale) Längenangabe für den Abstand zwischen den Spalten (column-gap).
  Wenn kein Wert für column-gap gesetzt ist, wird der Wert für row-gap verwendet.

Spalten mit gap So sieht's aus

main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 25px;
}

In diesem Beispiel wurde auf einen Rand mit margin verzichtet. Stattdessen werden mit gap: 10px 25px; Zwischenräume zwischen den Rasterelementen festgelegt.
Dies entspricht

• column-gap: 10px für die Zwischenraumbreite zwischen nebeneinanderliegenden Grid-Items und
• row-gap: 25px für die Zwischenraumbreite zwischen übereinanderliegenden Grid-Items.

So sieht's aus

Browsersupport

Dabei ist der Browsersupport noch uneinheitlich:

• im Mehrspaltenlayout mit columns:

• 
• 
• 
• 
• 
• 

Details: caniuse.com

• in Flexbox

• 
• 
• 
• 
• 

• im Grid Layout

• 
• 
• 
• 
• 

Beachten Sie: Der Edge-Browser vor Chromium-Edge verwendet für Grid die älteren Eigenschaften grid-gap, grid-row-gap und grid-column-gap.

Siehe auch

• Referenz: column-gap
• Flexbox: Spalten (gutter) mit gap
• Grid Layout: Spalten (gutter) mit gap