column-gzap Özelliği

column-gap özelliği, çok sütunlu metinlerde sütunlar arasındaki mesafeyi ve grid'de sütunlar arasındaki mesafeyi belirler. Özelliğin değeri olarak herhangi bir boyut birimi veya varsayılan olan normal anahtar kelimesi kullanılır, bu durumda tarayıcı sütunlar arasında optimum mesafeyi kendisi belirler.

Sözdizimi

seçici {
	column-gap: değer;
}

Örnek

Bu örnekte sütun sayısı column-count (3 adet) ve aralarındaki boşluk column-gap 50px olarak belirtilmiştir. Sütun genişlikleri ise bu koşulları (sütun sayısı ve aralarındaki mesafe) karşılayacak şekilde otomatik olarak ayarlanacaktır:

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

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

Örnek . Normal Değeri

Bu örnekte sütun genişliği column-width 150px, sayısı column-count auto değerinde, ve aralarındaki boşluk column-gap ise normal değerindedir. Böylece tarayıcı gerekli sütun sayısını ve aralarındaki boşluğu kendisi belirleyecektir (ancak genişlikleri 150px olacaktır):

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

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

Örnek

Grid'de sütunlar arasına mesafe belirleyelim:

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

Örnek

Şimdi de sütunlar arası mesafeyi % olarak belirleyelim:

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

Ayrıca Bakınız

sütun genişliğini belirleyen column-width özelliği
sütun sayısını belirleyen column-count özelliği
grid'deki elemanlar arası mesafeyi belirleyen gap özelliği
grid'deki satırlar arası mesafeyi belirleyen row-gap özelliği