Eigenschaft column-gap

Die Eigenschaft column-gap legt den Abstand zwischen Spalten in mehrspaltigem Text fest sowie den Abstand zwischen Spalten im Grid. Als Wert der Eigenschaft dienen beliebige Einheiten für Größen oder das Schlüsselwort normal (standardmäßig), bei dem der Browser selbst einen optimalen Abstand zwischen den Spalten wählt.

Syntax

Selektor {
	column-gap: Wert;
}

Beispiel

In diesem Beispiel wurde die Anzahl der Spalten column-count (3 Stück) und der Abstand zwischen ihnen column-gap mit 50px angegeben. Die Spaltenbreite wird automatisch so angepasst, dass diese Bedingungen erfüllt werden (Anzahl der Spalten und Abstand zwischen ihnen):

<div id="elem">
	some long text
</div>

#elem {
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

Beispiel . Wert normal

In diesem Beispiel wurde die Spaltenbreite column-width mit 150px angegeben, ihre Anzahl column-count steht auf dem Wert auto, und der Abstand column-gap zwischen ihnen - auf dem Wert normal. Somit wählt der Browser selbst die erforderliche Anzahl an Spalten und den Abstand zwischen ihnen (aber ihre Breite beträgt 150px):

<div id="elem">
	some long text
</div>

#elem {
	column-gap: normal;
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

Beispiel

Lassen Sie uns den Abstand zwischen Spalten im Grid festlegen:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

Beispiel

Lassen Sie uns nun den Abstand zwischen Spalten in % festlegen:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 5%;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

Siehe auch

die Eigenschaft column-width,
die die Spaltenbreite festlegt
die Eigenschaft column-count,
die die Anzahl der Spalten festlegt
die Eigenschaft gap,
die den Abstand zwischen Elementen im Grid festlegt
die Eigenschaft row-gap,
die den Abstand zwischen Zeilen im Grid festlegt