Proprietatea column-gap

Proprietatea column-gap stabilește distanța dintre coloane în textul multicoloană, precum și distanța dintre coloane în grid. Valorile proprietății pot fi orice unități de dimensiuni sau cuvântul cheie normal (implicit), când browserul alege singur distanța optimă dintre coloane.

Sintaxa

selector {
	column-gap: valoare;
}

Exemplu

În acest exemplu este specificat numărul de coloane column-count (3 bucăți) și spațiul dintre ele column-gap de 50px. Iar lățimea coloanelor se va selecta automat astfel încât să satisfacă aceste condiții (numărul de coloane și distanța dintre ele):

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

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

Exemplu . Valoarea normal

În acest exemplu este specificată lățimea coloanei column-width de 150px, numărul lor column-count este setat la valoarea auto, iar spațiul column-gap dintre ele - la valoarea normal. Astfel, browserul însuși va selecta numărul necesar de coloane și spațiul dintre ele (dar lățimea lor va fi de 150px):

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

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

Exemplu

Să stabilim distanța dintre coloane î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;
}

Exemplu

Și acum să stabilim distanța dintre coloane în %:

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

Vezi și

proprietatea column-width,
care stabilește lățimea coloanei
proprietatea column-count,
care stabilește numărul de coloane
proprietatea gap,
care stabilește distanța dintre elemente în grid
proprietatea row-gap,
care stabilește distanța dintre rânduri în grid