column-gap CSS property

Probieren Sie es aus

column-gap: 0;

column-gap: 10%;

column-gap: 1em;

column-gap: 20px;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

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

/* <length-percentage> value */
column-gap: 3px;
column-gap: 2.5em;
column-gap: 3%;
column-gap: calc(3% - 6px);

/* <line-width> keyword value */
column-gap: thin;
column-gap: medium;
column-gap: thick;

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

Werte

Diese Eigenschaft wird durch einen einzelnen Wert aus der folgenden Liste angegeben:

normal

Setzt den Abstand in mehrspaltigen Layouts auf 1em, andernfalls auf 0. Dies ist der Standardwert.

<line-width>

Legt die Größe des Abstands mit den Schlüsselwörtern thin, medium oder thick oder mit einem positiven <length>-Wert fest.

<length-percentage>

Legt einen nicht negativen <length>- oder <percentage>-Wert fest. Prozentangaben beziehen sich auf die Inline-Größe der Content-Box.

Beschreibung

Die Eigenschaft column-gap legt die Größe des Abstands zwischen den Spalten eines Elements fest. Sie definiert einen Abstand fester Länge zwischen Elementen in einem Container und trennt die Boxen entlang der Inline-Achse des Containers. Negative Werte sind ungültig. In mehrspaltigen Containern sind die Spaltenabstände standardmäßig 1em breit. Zwischen Grid-Spalten sowie zwischen Flex-Elementen oder Flex-Zeilen wird dagegen standardmäßig kein Abstand eingefügt. Weitere Informationen zu Abständen je nach Layouttyp finden Sie unter CSS-Abstände definieren.

Prozentangaben werden relativ zur Größe der Content-Box des Containerelements entlang seiner Inline-Achse berechnet, sofern diese Größe feststeht; andernfalls werden sie relativ zu 0 berechnet. Eine Ausnahme bildet das Grid-Layout: Dort werden zyklische Prozentwerte bei der Bestimmung von Beiträgen zur intrinsischen Größe zu null aufgelöst, beim Layout der Inhalte jedoch relativ zur Content-Box des Elements. Weitere Informationen finden Sie unter Abstandswerte als Prozentangaben festlegen.

Der Spaltenabstand kann als Abstandsdekoration eine sichtbare Trennlinie enthalten. Um eine Linie zwischen den Spalten zu zeichnen, verwenden Sie column-rule oder die Kurzschreibweise rule. Die Linie erscheint in der Mitte des Abstands, beeinflusst aber nicht dessen Größe.

Die Eigenschaft column-gap kann zusammen mit row-gap auch über die Kurzschreibweise gap festgelegt werden. Diese setzt row-gap und column-gap in einer einzigen Deklaration, und zwar in dieser Reihenfolge.

Die Eigenschaft column-gap hat grid-column-gap ersetzt. Diese Eigenschaft wurde ursprünglich in CSS Grid Layout definiert, um Abstände zwischen Grid-Spalten zu erzeugen. grid-column-gap ist heute ein Alias für column-gap.

Formale Definition

Formale Syntax

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

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

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Beispiele

Flexbox-Layout

Dieses Beispiel zeigt, wie Sie mit column-gap horizontalen Abstand zwischen benachbarten Flex-Elementen erzeugen.

HTML

Wir fügen sechs Elemente in ein Containerelement ein:

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

CSS

Wir setzen die Eigenschaft display auf flex und flex-flow auf row wrap. So entsteht ein Flex-Container mit mehreren Zeilen, in die die Elemente bei Bedarf umgebrochen werden können. Die Flex-Elemente erhalten jeweils eine Flex-Basis von 200px oder 300px.

Mit der Eigenschaft column-rule definieren wir eine Spaltenlinie. column-gap wird für den Flex-Container auf 20px gesetzt. Dadurch entsteht zwischen benachbarten Flex-Elementen in jeder Zeile ein Abstand von 20px. Die Spaltenlinie wird in der Mitte dieses Abstands gezeichnet.

.flexbox {
  display: flex;
  flex-flow: row wrap;
  column-rule: 1px solid magenta;

  column-gap: 20px;
}

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

Ergebnis

Um einen vertikalen Abstand zwischen Flex-Zeilen festzulegen, geben Sie für die Eigenschaft row-gap einen Wert größer als null an. Optional können Sie row-gap und column-gap gemeinsam mit der Kurzschreibweise gap festlegen.

Grid-Layout

Dieses Beispiel zeigt die Verwendung von column-gap mit einem <percentage>-Wert in einem Grid-Layout. Es zeigt außerdem, dass die Größe von column-gap nicht von der Breite der Spaltenlinie beeinflusst wird.

HTML

Wir fügen sieben Elemente in ein Containerelement ein:

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

CSS

Wir setzen display auf grid, width auf 400px und grid-template-columns auf repeat(3, 1fr). Dadurch entsteht ein 400px breiter Grid-Container mit drei Spalten und so vielen Zeilen wie nötig. Jede Zeile ist 100px hoch, wie durch die Eigenschaft grid-auto-rows festgelegt. Jedes ungerade Grid-Element hat die Hintergrundfarbe lime; die geraden Grid-Elemente sind halbtransparent.

Außerdem haben wir eine sehr breite, halbtransparente column-rule festgelegt. Damit zeigen wir, dass die Linie hinter dem Inhalt gezeichnet wird und ihre Breite keinen Einfluss auf die Größe des Abstands hat. column-gap ist auf 5% gesetzt, wodurch ein 20px breiter Abstand entsteht.

#grid {
  display: grid;
  width: 400px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  column-rule: 30px solid #ff00ff33;

  column-gap: 5%;
}

#grid > div {
  outline: 1px solid green;
  background-color: lime;
}
#grid > div:nth-of-type(even) {
  background-color: #00ff0033;
}

@layer no-support {
  @supports not (column-gap: 5%) {
    body::before {
      content: "Your browser doesn't support percent values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Ergebnis

Die Spaltenlinie ist breiter als der Spaltenabstand und nur dort sichtbar, wo die darüber gezeichneten Elemente halbtransparent sind.

Mehrspaltiges Layout

Dieses Beispiel zeigt die Verwendung von column-gap mit einem <line-width>-Schlüsselwort in einem mehrspaltigen Layout.

HTML

<p class="content-box">
  This is some multi-column text with a thin column gap created with the CSS
  `column-gap` property. The `normal` default value for the `column-gap`
  property in multi-col layout is 1em.
</p>

CSS

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

@layer no-support {
  @supports not (column-gap: thick) {
    body::before {
      content: "Your browser doesn't support the <line-width> keyword values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• row-gap
• gap
• column-rule
• rule
• CSS-Abstände definieren
• Grundkonzepte des Grid-Layouts: Abstände
• Spalten gestalten
• Modul CSS Gaps