CSS/Tutorials/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.
Inhaltsverzeichnis
column-gap[Bearbeiten]
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.
.mehrspaltig {
column-count: 2;
column-gap: 10em;
padding: 1em;
width: 35em;
border: 1px solid;
}
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.
main {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 25px;
}
gap: 10px 25px; Zwischenräume zwischen den Rasterelementen festgelegt.Dies entspricht
-
column-gap: 10pxfür die Zwischenraumbreite zwischen nebeneinanderliegenden Grid-Items und -
row-gap: 25pxfür die Zwischenraumbreite zwischen übereinanderliegenden Grid-Items.
Browsersupport[Bearbeiten]
Dabei ist der Browsersupport noch uneinheitlich:
- im Mehrspaltenlayout mit columns:
Details: caniuse.com
- in Flexbox
- im Grid Layout
grid-gap, grid-row-gap und grid-column-gap.
Zur Visualisierung sind die Kindelemente des
article-Elements der Klasse „mehrspaltig“ mit einem Hintergrund versehen.