Property column-count kolom memungkinkan Kalian untuk meletakkan konten elemen dalam beberapa kolom dengan menentukan sejumlah kolom.

Bergantung pada ruang yang tersedia, browser akan menentukan lebar kolom, kecuali jika Kalian menentukan lebar yang tepat menggunakan properti lebar kolom. Menyetel penghitungan kolom dan lebar kolom tidak selalu masuk akal, karena dapat membatasi fleksibilitas dan daya tanggap tata letak, seperti jika Kalian menggunakan lebar absolut untuk kolom alih-alih persentase lebar.Menentukan jumlah kolom sederhana. Misalnya, berikut ini menetapkan jumlah kolom menjadi 3 pada halaman.

 

Meletakkan konten, seperti teks dan gambar, dalam banyak kolom biasanya dilakukan dalam tata letak majalah cetak, dan menggunakan properti ini, bersama dengan yang lain, Anda dapat membuat efek yang serupa di web.

Official Syntax

  • Syntax:
  • Initial: auto
  • Berlaku untuk: elemen level blok yang tidak diganti (kecuali elemen tabel), sel tabel, dan elemen blok inline

Values:

  • auto: Berarti jumlah kolom akan ditentukan oleh properti lain (mis., Lebar kolom, jika memiliki nilai selain otomatis).
  • <integer>: Menjelaskan jumlah kolom optimal di mana konten elemen akan mengalir. Nilai harus lebih besar dari 0. Jika lebar kolom dan jumlah kolom memiliki nilai non-otomatis, nilai integer menggambarkan jumlah maksimum kolom.

Contoh:

Contoh berikut menentukan jumlah kolom pada elemen dengan mag nama kelas. Kemudian, menggunakan kueri media, jumlah kolom diubah pada layar kecil.