CSS column-gap Eigenschaft

Die CSS-Eigenschaft column-gap legt die Größe des Abstands (den Zwischenraum) zwischen benachbarten Spalten fest. Sie funktioniert in drei verschiedenen Layout-Kontexten: Mehrspalten-Layouts, die mit column-count erstellt werden, flex-Containern und grid-Containern. In Flexbox und Grid ist sie die horizontale Hälfte des gap-Kurzschreibweise und ersetzt die ältere Eigenschaft grid-column-gap.

Diese Seite behandelt die Syntax der Eigenschaft, die akzeptierten Werte, das Verhalten in den verschiedenen Layout-Kontexten sowie Besonderheiten bei Prozentwerten und der column-rule.

column-gap gehört zu den CSS3-Eigenschaften.

Was sie bewirkt

In einem Mehrspalten-Layout verteilt der Browser Ihren Inhalt auf eine bestimmte Anzahl von Spalten. Standardmäßig werden die Spalten durch einen normal-Abstand getrennt (1em bei Mehrspalten-Elementen). Mit column-gap können Sie diesen Standardwert durch einen beliebigen Längenwert ersetzen und den Zwischenraum nach Ihren Designanforderungen enger oder weiter gestalten.

Die Eigenschaft akzeptiert ein normal-Schlüsselwort oder einen <length>-Wert:

normal — der Standardwert. Bei Mehrspalten-Layouts entspricht dies 1em. Bei Flex- und Grid-Containern entspricht es 0.
<length> — ein fester Abstand wie 30px, 2em oder 1rem. Negative Werte sind nicht erlaubt.
<percentage> — ein Abstand relativ zur Breite des Elements.

Die Eigenschaft unterstützt außerdem die Standardschlüsselwörter initial und inherit.

Info

Vendor-Präfixe (-moz-column-gap, -webkit-column-gap) sind für moderne Browser nicht mehr erforderlich. Native Unterstützung ist in allen gängigen Browsern verfügbar.

Wo die column-rule liegt

Wenn eine column-rule zwischen den Spalten gezeichnet wird, befindet sie sich in der Mitte des Abstands und nimmt keinen eigenen Platz ein. Wenn Sie column-gap vergrößern, bleibt die Linie zentriert mit mehr Freiraum auf jeder Seite; ist der Abstand zu gering, kann eine breite Linie den Text optisch bedrängen.

column-gap vs. gap und grid-column-gap

In Flex- und Grid-Containern ist column-gap die horizontale Hälfte der gap-Kurzschreibweise: gap: <row-gap> <column-gap>. Die ältere Eigenschaft grid-column-gap übernimmt dieselbe Aufgabe in Grid, ist jedoch veraltet — bevorzugen Sie column-gap.

Anfangswert	normal
Gilt für	Mehrspalten-Elemente, flex-Container, grid-Container.
Vererbbar	Nein.
Animierbar	Ja. Die Länge des Spaltenabstands ist animierbar.
Version	CSS3
DOM Syntax	object.style.columnGap = "100px";

Syntax

Syntax der CSS column-gap Eigenschaft

column-gap: length | normal | initial | inherit;

Beispiel der column-gap Eigenschaft:

Beispiel der CSS column-gap Eigenschaft mit dem Wert normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: normal;
      }
    </style>
  </head>
  <body>
    <h2>The column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Mit column-gap: normal werden die vier Spalten durch den Standard-Zwischenraum von 1em getrennt.

Beispiel der column-gap Eigenschaft mit dem Wert "length":

Hier wird ein expliziter Abstand von 30px gesetzt, der den Spalten mehr Trennung als der normal-Standard gibt.

Beispiel der CSS column-gap Eigenschaft mit dem Wert length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Column-gap property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Probier es selbst »

column-gap in Flex und Grid verwenden

Dieselbe Eigenschaft steuert den horizontalen Abstand zwischen Flex-Elementen und zwischen Grid-Spalten. In diesen Kontexten wird sie üblicherweise über die gap-Kurzschreibweise angegeben, aber column-gap allein wird vollständig unterstützt:

/* Flex container: 24px between items in a row */
.flex {
  display: flex;
  column-gap: 24px;
}

/* Grid: 16px between columns, 8px between rows */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 8px;
}

Beachten Sie, dass in Flex und Grid der Standardwert für column-gap 0 beträgt, während in einem Mehrspalten-Layout der normal-Standard 1em ist.

Prozentwerte

Ein prozentualer Abstand wird gegen die Breite des Elements berechnet, nicht gegen die Spaltenbreite:

div {
  column-count: 3;
  column-gap: 5%; /* 5% of the element's width */
}

Da Prozentwerte von der Containerbreite abhängen, wächst und schrumpft der Zwischenraum mit der Größenänderung des Layouts — praktisch für fluide Designs, aber schwerer vorhersehbar als ein fester px-Wert.

Werte

Wert	Beschreibung
normal	Die Standardgröße des Abstands zwischen Spalten.
length	Gibt die Länge an, die den Abstand zwischen den Spalten festlegt. Kann in em, px oder Prozent angegeben werden.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Was ist der Zweck der column-gap Eigenschaft in CSS?

Legt den Abstand zwischen den Spalten in einem Mehrspalten-Layout festÄndert die Farbe der Spalten in einem Mehrspalten-LayoutDefiniert die Breite oder Höhe einer bestimmten Spalte in einem Mehrspalten-LayoutLegt den Abstand zwischen dem Rahmen und dem Inhalt innerhalb einer Spalte festSteuert die Verteilung des verfügbaren Platzes zwischen den Spalten, wenn zusätzlicher Platz vorhanden ist