Īpašība column-gap

Īpašība column-gap nosaka attālumu starp kolonnām daudzkolonnu tekstā, kā arī attālumu starp kolonnām gridā. Īpašības vērtība var būt jebkuras mērvienības izmēriem vai atslēgvārds normal (pēc noklusējuma), kurā pārlūkprogramma pati izvēlas optimālo attālumu starp kolonnām.

Sintakse

selektors {
	column-gap: vērtība;
}

Piemērs

Šajā piemērā ir norādīts kolonnu skaits column-count (3 gabali) un atstarpe starp tām column-gap 50px. Un kolonnu platums tiks automātiski izvēlēts tā, lai atbilstu šiem nosacījumiem (kolonnu skaitam un attālumam starp tām):

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

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

Piemērs . Vērtība normal

Šajā piemērā ir norādīts kolonnas platums column-width 150px, to skaits column-count ir iestatīts vērtībā auto, un atstarpe column-gap starp tām - vērtībā normal. Tādējādi pārlūkprogramma pati izvēlēsies nepieciešamo kolonnu skaitu un atstarpi starp tām (bet to platums būs 150px):

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

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

Piemērs

Uzstādīsim attālumu starp kolonnām 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;
}

Piemērs

Un tagad uzstādīsim attālumu starp kolonnām %:

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

Skatiet arī

īpašība column-width,
kura nosaka kolonnas platumu
īpašība column-count,
kura nosaka kolonnu skaitu
īpašība gap,
kura nosaka attālumu starp elementiem gridā
īpašība row-gap,
kura nosaka attālumu starp rindām gridā