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> values */
column-gap: 3px;
column-gap: 2.5em;
column-gap: 3%;
column-gap: calc(3% - 6px);

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

Werte

Diese Eigenschaft wird als ein einziger Wert aus der folgenden Liste angegeben:

normal

Für das Mehrspaltenlayout entspricht es 1em; ansonsten 0. Dies ist der Standardwert.

<length>

Die Größe der Lücke zwischen den Spalten, als nicht-negativer <length> Wert.

<percentage>

Die Größe der Lücke zwischen den Spalten, als nicht-negativer <percentage> Wert definiert.

Beschreibung

Die column-gap-Eigenschaft legt die Größe der Lücke zwischen den Spalten eines Elements fest. Die Eigenschaft spezifiziert eine Gutter mit fester Länge zwischen Elementen in einem Container, die Boxen in der Inline-Achse des Containers trennt. Negative Werte sind ungültig. Der Standardwert normal entspricht 1em bei Mehrspaltencontainern und ansonsten 0.

Prozentsätze werden basierend auf der Größe des Inhaltsbereichs der Inline-Achse des Containerelements berechnet, wenn diese Größe fest ist, ansonsten basierend auf 0, außer im Grid-Layout, bei dem zyklische Prozentgrößen sich gegen Null zur Bestimmung der intrinsischen Größe beitragen, aber gegen den Inhaltsbereich des Elements auflösen, wenn der Inhalt angeordnet wird.

Die Spaltenlücke kann einen sichtbaren Separator als Dekoration enthalten. Wenn eine Linie zwischen den Spalten vorhanden ist, die mit der column-rule-Eigenschaft oder der rule-Kurzschrift gesetzt ist, erscheint sie in der Mitte der Lücke, hat jedoch keinen Einfluss auf die Größe der Lücken zwischen den Spalten.

Ein veraltetes grid-column-gap ist ein Alias für column-gap. Es wurde ursprünglich im Grid-Layout definiert, um Lücken zwischen Rasterspalten zu erstellen.

Das column-gap, zusammen mit der row-gap-Eigenschaft, kann auch mit der gap-Kurzschrift gesetzt werden.

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

In diesem Beispiel enthält ein Flexcontainer sechs Flex-Elemente mit zwei verschiedenen Breiten (200px und 300px), wodurch Flex-Elemente entstehen, die nicht als Raster angeordnet sind. Die column-gap-Eigenschaft wird verwendet, um horizontalen Raum 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 seinen display-Wert auf flex. Wir verwenden dann die flex-flow-Kurzschrift, um die flex-direction auf Zeile (Standard) und flex-wrap auf wrap zu setzen, wodurch es den Flex-Elementen ermöglicht wird, bei Bedarf auf neue Zeilen zu fließen. Standardmäßig dehnen sich Flex-Elemente, um so hoch wie ihr Container zu sein. Durch Setzen einer height werden selbst leere Flex-Elemente 100px hoch.

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

Der column-gap-Wert wird auf 20px am Flex-Container gesetzt, um eine 20px Lücke 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

Grid-Layout

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

Mehrspalten-Layout

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• row-gap
• gap
• Grundkonzepte des Grid-Layouts: Gutters
• Spalten stylen
• CSS Lücken Modul