CSS/Eigenschaften/column-gap

Browserunterstützung
caniuse.com

Die Eigenschaft column-gap bestimmt für ein mehrspaltig anzuzeigendes Element den Abstand zwischen den Spalten.
Ursprünglich gab es für Grid Layout eine grid-column-gap, die jetzt aber auch für Flexbox gilt und im column-gap des Mehrspaltenlayouts (columns) aufgegangen ist.

Erlaubte Werte

• eine nicht negative Längenangabe
• ein nicht negativer Prozentwert
• auto: Browser wählt Wert selbstständig aus

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

.beispiel1 ul {
  column-gap: 1em;
}

Die ul erhält einen Abstand von 1em zwischen den einzelnen Kindelementen.

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

Siehe auch

• Grid Layout
  • Spalten (gutter) mit gap
• Flexbox: Spalten (gutter) mit gap
• Typografie/Spalten
  • column-rule-width und gap

Weblinks

• Spezifikation (W3C): column-gap
• MDN: gap
• css-tricks: Minding the “gap” von Patrick Brosset on Sep 16, 2021
• css-tricks: Gaps? Gasp! von Eric Meyer on Apr 6, 2021
  interessante Visualisierung, wie gap bei Grid, Flexbox und columns wirkt.
• Details: caniuse.com