Properti column-gap

Properti column-gap mengatur jarak antara kolom dalam teks multi-kolom, serta jarak antara kolom dalam grid. Nilai properti dapat berupa satuan ukuran apa pun atau kata kunci normal (secara default), di mana browser secara otomatis memilih jarak optimal antara kolom.

Sintaksis

selektor {
	column-gap: nilai;
}

Contoh

Dalam contoh ini, jumlah kolom ditentukan oleh column-count (3 buah) dan jarak antaranya column-gap sebesar 50px. Lebar kolom akan secara otomatis disesuaikan untuk memenuhi kondisi ini (jumlah kolom dan jarak antaranya):

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

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

Contoh . Nilai normal

Dalam contoh ini, lebar kolom ditentukan oleh column-width sebesar 150px, jumlahnya column-count diatur ke nilai auto, dan jarak column-gap antaranya - ke nilai normal. Dengan demikian, browser sendiri akan memilih jumlah kolom yang diperlukan dan jarak antaranya (tetapi lebarnya akan 150px):

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

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

Contoh

Mari atur jarak antara kolom dalam grid:

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

Contoh

Dan sekarang mari atur jarak antara kolom dalam %:

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

Lihat juga

properti column-width,
yang mengatur lebar kolom
properti column-count,
yang mengatur jumlah kolom
properti gap,
yang mengatur jarak antara elemen dalam grid
properti row-gap,
yang mengatur jarak antara baris dalam grid