Xüsusiyyət column-gap

Xüsusiyyət column-gap çoxsütunlu mətndə sütunlar arası məsafəni, həmçinin grid-də sütunlar arası məsafəni təyin edir. Xüsusiyyətin dəyəri olaraq hər hansı ölçü vahidləri və ya normal açar sözü (standart olaraq) istifadə oluna bilər, bu zaman brauzer özü sütunlar arası optimal məsafəni təyin edir.

Sintaksis

selektor {
	column-gap: dəyər;
}

Nümunə

Bu nümunədə sütunların sayı column-count (3 ədəd) və onlar arasındakı boşluq column-gap 50px olaraq təyin edilib. Sütunların eni isə avtomatik olaraq bu şərtlərə (sütun sayı və onlar arası məsafə) uyğun olaraq təyin olunacaq:

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

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

Nümunə . Normal dəyəri

Bu nümunədə sütunun eni column-width 150px, onların sayı column-count auto dəyərində, aralarındakı boşluq column-gap isə normal dəyərində təyin edilib. Beləliklə, brauzer özü lazımi sayda sütunu və onlar arasındakı boşluğu təyin edəcək (lakin onların eni 150px olacaq):

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

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

Nümunə

Gəlin grid-də sütunlar arası məsafəni təyin edək:

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

Nümunə

İndi isə gəlin sütunlar arası məsafəni % ilə təyin edək:

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

Həmçinin bax

xüsusiyyət column-width,
sütunun enini təyin edir
xüsusiyyət column-count,
sütunların sayını təyin edir
xüsusiyyət gap,
grid-də elementlər arası məsafəni təyin edir
xüsusiyyət row-gap,
grid-də sıralar arası məsafəni təyin edir