column-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Die column-gap CSS Eigenschaft legt die Größe des Abstands (Rinne) zwischen den Spalten eines Elements fest.

Ursprünglich Teil des Multi-column Layouts, wurde die Definition von column-gap erweitert, um mehrere Layout-Methoden einzuschließen. Jetzt in CSS box alignment spezifiziert, kann es in mehrspaltigen, flexiblen Box- und Rasterlayouts verwendet werden.

Frühere Versionen der Spezifikation nannten diese Eigenschaft grid-column-gap, und um die Kompatibilität mit älteren Websites aufrechtzuerhalten, akzeptieren Browser weiterhin grid-column-gap als Alias für column-gap.

Probieren Sie es aus

Syntax

css
/* 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.

Werte

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.

Formale Definition

Anfangswertnormal
Anwendbar aufmulti-column elements, flex containers, grid containers
VererbtNein
Prozentwertebeziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wertas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
AnimationstypLängenangabe, Prozentsatz oder calc();

Formale Syntax

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

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

Beispiele

Flex-Layout

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

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.

css
.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

Hinweis: Während horizontaler Abstand zwischen angrenzenden Flex-Elementen in jeder Flex-Zeile besteht, gibt es keinen Abstand zwischen den Zeilen. Um vertikalen Abstand zwischen Flex-Zeilen zu setzen, können Sie einen Wert ungleich null für die row-gap-Eigenschaft angeben. Die gap Kurzschreibweise ist ebenfalls verfügbar, um sowohl row-gap als auch column-gap in einer Deklaration festzulegen, in dieser Reihenfolge.

Raster-Layout

HTML

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

CSS

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

Mehrspaltiges Layout

HTML

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

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

Ergebnis

Spezifikationen

Specification
CSS Box Alignment Module Level 3
# column-row-gap
CSS Grid Layout Module Level 2
# gutters
CSS Multi-column Layout Module Level 1
# column-gap

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch