Savybė column-gap

Savybė column-gap nustato atstumą tarp stulpelių daugiacilpiame tekste, taip pat atstumą tarp stulpelių garde. Savybės reikšmė gali būti bet kokie dydžio vienetai arba raktažodis normal (numatytasis), kai naršyklė pati parenka optimalų atstumą tarp stulpelių.

Sintaksė

selektorius {
	column-gap: reikšmė;
}

Pavyzdys

Šiame pavyzdyje nurodytas stulpelių skaičius column-count (3 vienetai) ir tarpas tarp jų column-gap 50px. O stulpelių plotis automatiškai bus parinktas taip, kad tenkintų šias sąlygas (stulpelių skaičiui ir atstumui tarp jų):

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

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

Pavyzdys . Reikšmė normal

Šiame pavyzdyje nurodytas stulpelio plotis column-width 150px, jų skaičius column-count yra reikšmėje auto, o tarpas column-gap tarp jų - reikšmėje normal. Taigi, naršyklė pati pasirinks reikiamą stulpelių skaičių ir tarpą tarp jų (bet jų plotis bus 150px):

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

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

Pavyzdys

Nustatykime atstumą tarp stulpelių garde:

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

Pavyzdys

Dabar nustatykime atstumą tarp stulpelių %:

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

Taip pat žiūrėkite

savybė column-width,
kuri nustato stulpelio plotį
savybė column-count,
kuri nustato stulpelių skaičių
savybė gap,
kuri nustato atstumą tarp elementų garde
savybė row-gap,
kuri nustato atstumą tarp eilučių garde