Properti column-width

Properti column-width mengatur lebar kolom dalam teks multi-kolom. Nilai dari properti ini dapat berupa satuan ukuran apa pun, kecuali persen, atau kata kunci auto (default). Dengan nilai auto, browser akan memilih lebar kolom yang optimal secara otomatis berdasarkan column-count dan column-gap.

Sintaks

selector {
	column-width: nilai;
}

Contoh . Lebar yang Ditentukan

Dalam contoh ini, lebar kolom column-width ditentukan sebesar 150px, sedangkan jumlahnya column-count diatur ke nilai auto. Hasilnya, lebar kolom akan menjadi 150px, sedangkan jumlah kolom dan jarak antar kolom akan dipilih secara otomatis oleh browser:

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

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

Contoh . Nilai auto

Dalam contoh ini, teks akan dibagi menjadi 3 kolom (karena column-count diatur ke nilai 3), sedangkan lebarnya akan dihitung secara otomatis:

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

#elem {
	column-width: auto;
	column-count: 3;
	text-align: justify;
}

Lihat juga

properti column-count,
yang mengatur jumlah kolom
properti column-gap,
yang mengatur jarak antar kolom
properti column-rule,
yang mengatur batas antar kolom
properti column-span,
yang mengatur jumlah kolom yang harus direntangkan oleh suatu elemen
properti columns,
yang merupakan properti shorthand untuk multi-kolom