Eienskap column-gap

Die eienskap column-gap spesifiseer die afstand tussen kolomme in multi-kolom teks, sowel as die afstand tussen kolomme in 'n grid. Die waarde van die eienskap kan enige eenheid vir groottes of die sleutelwoord normal (by verstek) wees, waarby die leser self die optimale afstand tussen kolomme kies.

Sintaksis

selektor {
	column-gap: waarde;
}

Voorbeeld

In hierdie voorbeeld word die aantal kolomme column-count (3 stuks) en die spasie tussen hulle column-gap as 50px gespesifiseer. En die breedte van die kolomme sal outomaties aangepas word om aan hierdie voorwaardes te voldoen (die aantal kolomme en die afstand tussen hulle):

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

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

Voorbeeld . Normal Waarde

In hierdie voorbeeld word die breedte van die kolom column-width as 150px gespesifiseer, hul aantal column-count is ingestel op die waarde auto, en die spasie column-gap tussen hulle - op die waarde normal. Dus sal die leser self die nodige aantal kolomme en spasie tussen hulle kies (maar hul breedte sal 150px wees):

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

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

Voorbeeld

Kom ons spesifiseer die afstand tussen kolomme in 'n grid:

<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 nou, kom ons spesifiseer die afstand tussen kolomme 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;
}

Sien ook

die eienskap column-width,
wat die breedte van 'n kolom spesifiseer
die eienskap column-count,
wat die aantal kolomme spesifiseer
die eienskap gap,
wat die afstand tussen elemente in 'n grid spesifiseer
die eienskap row-gap,
wat die afstand tussen rye in 'n grid spesifiseer