column-gap xususiyati

column-gap xususiyati ko'p ustunli matndagi ustunlar orasidagi masofani, shuningdek, griddagi ustunlar orasidagi masofani belgilaydi. Xususiyat qiymati sifatida istalgan o'lchov birliklari yoki normal kalit so'zi (sukut bo'yicha) qo'llaniladi, bunda brauzer ustunlar orasidagi optimal masofani o'zi tanlaydi.

Sintaksis

selector {
	column-gap: qiymat;
}

Misol

Ushbu misolda ustunlar soni column-count (3 ta) va ular orasidagi masofa column-gap 50px da belgilangan. Ustunlarning kengligi esa ushbu shartlarga (ustunlar soni va ular orasidagi masofaga) mos keladigan tarzda avtomatik ravishda sozlanadi:

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

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

Misol . Normal qiymati

Ushbu misolda ustun kengligi column-width 150px da, ularning soni column-count auto qiymatida, ular orasidagi masofa column-gap esa normal qiymatida belgilangan. Shunday qilib, brauzer kerakli ustunlar sonini va ular orasidagi masofani o'zi tanlaydi (lekin ularning kengligi 150px bo'ladi):

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

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

Misol

Keling, griddagi ustunlar orasidagi masofani belgilaymiz:

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

Misol

Endi esa ustunlar orasidagi masofani % da belgilaymiz:

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

Shuningdek qarang

column-width xususiyati,
bu ustun kengligini belgilaydi
column-count xususiyati,
bu ustunlar sonini belgilaydi
gap xususiyati,
bu griddagi elementlar orasidagi masofani belgilaydi
row-gap xususiyati,
bu griddagi qatorlar orasidagi masofani belgilaydi