CSS/Eigenschaften/Abstand/gap

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im Mehrspaltenlayout wie im Grid Layout, bei Flexbox oder auch columns besteht oft der Wunsch nach einer Gestaltung der Spaltenzwischenräume (engl. gutter). 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 Spalten (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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

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 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 Angabe (mit Ausnahme von Prozentwerten)
  • 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.
Beispiel: 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; Spalten zwischen den Rasterelementen festgelegt.
Dies entspricht
  • column-gap: 10px für die Spaltenbreite zwischen nebeneinanderliegenden Grid-Items und
  • row-gap: 25px für die Spaltenbreite zwischen übereinanderliegenden Grid-Items.


Browsersupport[Bearbeiten]

Dabei ist der Browsersupport noch uneinheitlich:

  • im Mehrspaltenlayout mit columns:
  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

  • in Flexbox
  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer
  • im Grid Layout
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Beachten Sie: Der IE Edge verwendet die ältere Notation mit Präfix: grid-gap, grid-row-gap und grid-column-gap.

Siehe auch[Bearbeiten]