Omadus column-gap

Omadus column-gap määrab vahemaa veergude vahel mitmeveerulises tekstis, samuti vahemaa veergude vahel võrgus (grid). Omaduse väärtuseks võivad olla mis tahes mõõtühikud või märksõna normal (vaikimisi), mille puhul brauser valib ise optimaalse vahemaa veergude vahel.

Süntaks

valija {
	column-gap: väärtus;
}

Näide

Selles näites on määratud veergude arv column-count (3 tükki) ja nendevaheline vahe column-gap väärtusega 50px. Veergude laius valitakse automaatselt nii, et see vastaks nendele tingimustele (veergude arv ja vahemaa nende vahel):

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

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

Näide . Väärtus normal

Selles näites on määratud veeru laius column-width väärtusega 150px, nende arv column-count on seatud väärtusele auto, ja nendevaheline vahe column-gap on väärtusel normal. Seega valib brauser ise vajaliku veergude arvu ja nendevahelise vahe (kuid nende laius on 150px):

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

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

Näide

Määrame vahemaa veergude vahel võrgus (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;
}

Näide

Ja nüüd määrame vahemaa veergude vahel %:

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

Vaata ka

omadus column-width,
mis määrab veeru laiuse
omadus column-count,
mis määrab veergude arvu
omadus gap,
mis määrab vahemaa elementide vahel võrgus (grid)
omadus row-gap,
mis määrab vahemaa ridade vahel võrgus (grid)