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 als ein einzelner Wert aus der folgenden Liste angegeben:

normal

Setzt für das Mehrspalten-Layout den Abstand auf 1em; andernfalls auf 0. Dies ist der Standardwert.

<line-width>

Legt die Größe des Abstands mithilfe der Schlüsselwörter thin, medium oder thick oder eines positiven <length>-Werts fest.

<length-percentage>

Legt einen nicht negativen <length>- oder <percentage>-Wert fest. Prozentwerte beziehen sich auf die inline-size der Content-Box.

Beschreibung

Die Eigenschaft column-gap legt die Größe des Abstands zwischen den Spalten eines Elements fest. Die Eigenschaft gibt einen Abstand fester Länge zwischen Elementen in einem Container an und trennt Boxen auf der Inline-Achse des Containers. Negative Werte sind ungültig. Spaltenabstände in Multi-Col-Containern sind standardmäßig 1em breit, während zwischen Grid-Spalten oder Flex-Elementen beziehungsweise -Zeilen kein Abstand hinzugefügt wird.

Prozentwerte werden relativ zur Größe der Content-Box auf der Inline-Achse des Container-Elements berechnet, wenn diese Größe bestimmt ist, andernfalls relativ zu 0. Eine Ausnahme bildet das Grid-Layout: Dabei werden zyklische Prozentgrößen zur Bestimmung von Beiträgen zur intrinsischen Größe relativ zu null aufgelöst, bei der Anordnung der Inhalte jedoch relativ zur Content-Box des Elements.

Der Spaltenabstand kann einen sichtbaren Trenner als Abstandsdekoration enthalten. Um eine Linie zwischen den Spalten zu zeichnen, verwenden Sie die Kurzform column-rule oder rule. Die Linie erscheint in der Mitte des Abstands, hat jedoch keinen Einfluss auf die Größe des Abstands zwischen den Spalten.

Die Eigenschaft column-gap kann zusammen mit der Eigenschaft row-gap auch mithilfe der Kurzform gap gesetzt werden, die sowohl row-gap als auch column-gap in dieser Reihenfolge in einer Deklaration festlegt.

Die Eigenschaft column-gap ersetzte die Eigenschaft grid-column-gap, die ursprünglich im CSS-Grid-Layout zum Erstellen von Abständen zwischen Grid-Spalten definiert wurde. grid-column-gap ist nun 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

Flex-Layout

Dieses Beispiel demonstriert die Verwendung der Eigenschaft column-gap, um horizontalen Abstand zwischen benachbarten Flex-Elementen zu erzeugen.

HTML

Wir fügen sechs Elemente in ein Container-Element 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 die Eigenschaft flex-flow auf row wrap, um einen Flex-Container mit Elementzeilen zu erstellen. Dadurch können die Elemente bei Bedarf in neue Zeilen umbrochen werden. Die Flex-Elemente erhalten jeweils eine Flex-Basis von entweder 200px oder 300px.

Wir definieren mit der Eigenschaft column-rule eine Spaltenlinie. Der Wert von column-gap wird auf dem Flex-Container auf 20px gesetzt, wodurch zwischen den benachbarten Flex-Elementen in jeder Zeile ein Abstand von 20px entsteht. Die Spaltenlinie wird in der Mitte des 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 vertikalen Abstand zwischen Flex-Zeilen festzulegen, geben Sie für die Eigenschaft row-gap einen Wert ungleich null an. Optional können Sie sowohl row-gap als auch column-gap mithilfe der Kurzform gap festlegen.

Grid-Layout

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

HTML

Wir fügen sieben Elemente in ein Container-Element 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), um einen 400px breiten Grid-Container mit drei Spalten und so vielen Zeilen wie erforderlich zu erstellen. Jede Zeile ist 100px hoch, wie durch die Eigenschaft grid-auto-rows definiert. Jedes ungerade Grid-Element hat eine Hintergrundfarbe von lime, und die geraden Grid-Elemente sind halbtransparent.

Wir haben außerdem eine sehr breite, halbtransparente column-rule festgelegt, um zu zeigen, wie die Linie hinter dem Inhalt gezeichnet wird, ohne dass ihre Breite 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.

Mehrspalten-Layout

Dieses Beispiel demonstriert die Verwendung der Eigenschaft column-gap mit einem <line-width>-Schlüsselwortwert in einem Multi-Col-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
• Grundlegende Konzepte des Grid-Layouts: Abstände
• Spalten gestalten
• Modul CSS gaps