column-gap

/* Keyword value */
column-gap: normal;

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;

Die Eigenschaft column-gap wird als einer der unten aufgeführten Werte angegeben.

normal

Der Standardabstand des Browsers wird zwischen den Spalten verwendet. Für das mehrspaltige Layout ist dieser als 1em angegeben. Für alle anderen Layouttypen beträgt er 0.

<length>

Die Größe des Abstands zwischen den Spalten, definiert als <length>. Der Wert der Eigenschaft <length> muss nicht negativ sein.

<percentage>

Die Größe des Abstands zwischen den Spalten, definiert als <percentage>. Der Wert der Eigenschaft <percentage> muss nicht negativ sein.

column-gap = 
  normal                     |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

In diesem Beispiel enthält ein Flex-Container sechs Flex-Elemente mit zwei unterschiedlichen Breiten (200px und 300px), wodurch Flex-Elemente entstehen, die nicht als Raster angeordnet sind. Die column-gap-Eigenschaft wird verwendet, um horizontalen Abstand zwischen den angrenzenden Flex-Elementen hinzuzufügen.

HTML

<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Um einen Flex-Container zu erstellen, setzen wir den Wert der display-Eigenschaft auf flex. Wir verwenden dann die flex-flow Kurzschreibweise, um die flex-direction auf Zeile (Standard) und flex-wrap auf wrap zu setzen, was das Fließen der Flex-Elemente auf neue Zeilen ermöglicht, wenn nötig. Standardmäßig dehnen sich Flex-Elemente, um ebenso hoch wie ihr Container zu sein. Durch Setzen einer height sind selbst die leeren Flex-Elemente 100px hoch.

Um die column-gap-Eigenschaft besser zu demonstrieren, haben die Flex-Elemente in diesem Beispiel zwei unterschiedliche Breitenwerte. Die Breite der Flex-Elemente wird innerhalb der <div> Flex-Elemente festgelegt. Wir verwenden die flex-basis Komponente der flex Kurzschreibweise, um alle Flex-Elemente 200px breit zu machen. Dann zielen wir mit dem :nth-of-type(3n) Selektor jedes dritte Flex-Element an, um sie auf 300px zu erweitern.

Der column-gap Wert ist im Flex-Container auf 20px gesetzt, um einen 20px Abstand zwischen den angrenzenden Flex-Elementen in jeder Zeile zu schaffen.

.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}

Ergebnis

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Ergebnis

HTML

<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Ergebnis

• row-gap
• gap
• Grundlegende Konzepte des Rasterlayouts: Rinnen
• Spalten gestalten