Свойство 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,
которое задает расстояние между рядами в гриде