Уласцівасць column-gap

Уласцівасць column-gap задае адлегласць паміж калонкамі ў шматкалонкавым тэксце, а таксама адлегласць паміж слупкамі ў грідзе. Значэннем уласцівасці служыць любая адзінка вымярэння памераў або ключавое слова normal (па змаўчанні), пры якім браўзэр сам падбірае аптымальную адлегласць паміж калонкамі.

Сінтаксіс

селектар {
	column-gap: значэнне;
}

Прыклад

У гэтым прыкладзе паказана колькасць калонак column-count (3 штукі) і прамежак паміж імі column-gap у 50px. А шырыня калонак аўтаматычна падбярэцца так, каб задаволіць гэтыя ўмовы (колькасці калонак і адлегласці паміж імі):

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

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

Прыклад . Значэнне normal

У гэтым прыкладзе паказана шырыня калонкі column-width у 150px, іх колькасць column-count стаіць у значэнні auto, а прамежак column-gap паміж імі - у значэнні normal. Такім чынам, браўзэр сам падбярэ неабходную колькасць калонак і прамежак паміж імі (але іх шырыня будзе 150px):

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

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

Прыклад

Давайце зададзім адлегласць паміж слупкамі ў грідзе:

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

Прыклад

А цяпер давайце зададзім адлегласць паміж слупкамі ў %:

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

Глядзіце таксама

уласцівасць column-width,
якая задае шырыню калонкі
уласцівасць column-count,
якая задае колькасць калонак
уласцівасць gap,
якая задае адлегласць паміж элементамі ў грідзе
уласцівасць row-gap,
якая задае адлегласць паміж шэрагамі ў грідзе