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

normal

Bei Mehrspalten-Layouts wird auf 1em aufgelöst; andernfalls 0. Dies ist der Standardwert.

<length>

Die Größe des Abstands zwischen den Spalten, als nicht-negativer <length>-Wert.

<percentage>

Die Größe des Abstands zwischen den Spalten, definiert als nicht-negativer <percentage>-Wert.

Beschreibung

Die column-gap-Eigenschaft legt die Größe des Abstands zwischen den Spalten eines Elements fest. Die Eigenschaft gibt einen feste Länge des Gutter zwischen Elementen in einem Container an, die Boxen im Inline-Achse des Containers trennt. Negative Werte sind ungültig. Der Standardwert normal wird auf 1em bei Mehrspalten-Containern aufgelöst und auf 0 an allen anderen Stellen.

Prozentwerte werden berechnet basierend auf der Größe des Inhaltsbereichs der Inline-Achse des Container-Elements, wenn diese Größe bestimmt ist, andernfalls gegen 0, mit Ausnahme in Raster-Layouts, bei denen zyklische Prozentgrößen gegen null für die Bestimmung der intrinsischen Größe aufgelöst werden, aber gegen den Inhaltsbereich des Elements, wenn die Inhalte angeordnet werden.

Der Spaltenabstand kann einen sichtbaren Separator als Dekoration enthalten. Wenn es eine Linie zwischen den Spalten gibt, festgelegt mit der column-rule-Eigenschaft oder der rule-Kurzschrift, erscheint sie in der Mitte des Abstands, hat jedoch keine Auswirkung auf die Größe der Abstände zwischen den Spalten.

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

Der 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 Flex-Container 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 Wert der display-Eigenschaft auf flex. Wir verwenden dann die flex-flow-Kurzschrift, um die flex-direction auf Reihe (Standard) und flex-wrap auf wrap zu setzen, sodass die Flex-Elemente bei Bedarf auf neue Zeilen fließen können. Standardmäßig dehnen sich Flex-Elemente, um genauso hoch wie ihr Container zu sein. Durch das Setzen einer height, werden auch 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-Kurzschrift, um alle Flex-Elemente 200px breit zu machen. Wir zielen dann auf jedes dritte Flex-Element ab, indem wir den :nth-of-type(3n)-Selektor verwenden und sie auf 300px erweitern.

Der column-gap-Wert wird auf 20px am Flex-Container gesetzt, um einen 20px-Abstand zwischen den angrenzenden Flex-Elementen in jeder Reihe zu erzeugen.

.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

Raster-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
• Grundlegende Konzepte des Raster-Layouts: Gutter
• Spalten stylen
• CSS-Lücken Modul