Eigenschap column-gap

De eigenschap column-gap bepaalt de afstand tussen kolommen in meerkolomstekst, evenals de afstand tussen kolommen in een grid. De waarde van de eigenschap kan elke eenheid voor afmetingen zijn of het sleutelwoord normal (standaard), waarbij de browser zelf een optimale afstand tussen de kolommen kiest.

Syntaxis

selector {
	column-gap: waarde;
}

Voorbeeld

In dit voorbeeld is het aantal kolommen column-count (3 stuks) en de tussenruimte daartussen column-gap van 50px opgegeven. En de breedte van de kolommen wordt automatisch aangepast om aan deze voorwaarden te voldoen (aantal kolommen en afstand ertussen):

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

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

Voorbeeld . Waarde normal

In dit voorbeeld is de breedte van de kolom column-width van 150px opgegeven, hun aantal column-count staat op de waarde auto, en de tussenruimte column-gap ertussen - op de waarde normal. Zo kiest de browser zelf het benodigde aantal kolommen en de tussenruimte daartussen (maar hun breedte zal 150px zijn):

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

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

Voorbeeld

Laten we de afstand tussen kolommen in een grid instellen:

<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;
}

Voorbeeld

En laten we nu de afstand tussen kolommen instellen in %:

<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;
}

Zie ook

de eigenschap column-width,
die de breedte van een kolom bepaalt
de eigenschap column-count,
die het aantal kolommen bepaalt
de eigenschap gap,
die de afstand tussen elementen in een grid bepaalt
de eigenschap row-gap,
die de afstand tussen rijen in een grid bepaalt