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
/* 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
Initialer Wert | normal |
---|---|
Anwendbar auf | multi-column elements, flex containers, grid containers |
Vererbt | Nein |
Prozentwerte | beziehen sich auf die entsprechende Dimension des Inhaltsbereichs |
Berechneter Wert | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
Animationstyp | Lä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
<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.
.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
<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
Mehrspaltiges 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
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