CSS/Tutorials/Abstand/gap

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

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[Bearbeiten]

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

Browserunterstützung
caniuse.com

Erlaubt Werte:

  • numerische Längenangabe, keine Prozentwerte
  • 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 ansehen …
.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.

row-gap[Bearbeiten]

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

Erlaubt Werte:

  • numerische Längenangabe, keine Prozentwerte
  • auto: (Standardwert) weist die Browser an, einen „vernünftigen“ Wert (meist 1em) selbst zu wählen.

gap[Bearbeiten]

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 ansehen …
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.

Browsersupport[Bearbeiten]

Mittlerweile ist der Browsersupport einheitlich gut:

  • im Mehrspaltenlayout mit columns:
Browserunterstützung
caniuse.com
  • in Flexbox
Browserunterstützung
caniuse.com
  • im Grid Layout
Browserunterstützung
caniuse.com


Siehe auch[Bearbeiten]

  • css-tricks: Gaps? Gasp! von Eric Meyer on Apr 6, 2021
    interessante Visualisierung, wie gap bei Grid, Flexbox und columns wirkt.