column-width

Properti CSS column-width memungkinkan kamu untuk meletakkan konten elemen dalam beberapa kolom dengan menentukan nilai lebar kolom yang kemudian digunakan browser untuk membuat sejumlah kolom untuk meletakkan konten.

Jumlah kolom yang tepat tergantung pada ruang yang tersedia, atau pada jumlah tertentu yang dapat kamu tentukan menggunakan properti column-count.

Lebar kolom dan jumlah kolom bisa diatur menjadi fleksibel agar browser dapat menghitung jumlah kolom berdasarkan ruang yang tersedia.

Sehingga untuk membuat layout yang responsif lebih mudah.

Misalnya, jika kamu mengatur lebar kolom ke 12em, secara praktis kolom akan memiliki lebar 12em.

Namun jika ternyata ruang yang tersedia kurang dari 12em, hanya akan ada satu kolom yang lebarnya terbatas pada ruang yang tersedia.

CSS Syntax

column-gap: length | normal | initial | inherit;

Javascript Syntax

object.style.columnWidth="100px"

Property Values

default column-width: auto;

Elemen tidak akan mendistribusikan elemen turunannya ke dalam kolom, kecuali jika nilai column-count ditentukan. Dalam hal itu, lebar kolom akan disimpulkan dari jumlah kolom.

column-width: 10px;

Kamu dapat menggunakan nilai piksel untuk lebar kolom.

Jumlah kolom akan menjadi minimum yang dibutuhkan untuk mendistribusikan semua konten di seluruh elemen.