Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Menggunakan Property CSS3 Multi Columns.  CSS3 mendukung multi kolom untuk mengatur teks sebagai struktur  tampilan contennya. Kalau biasanya kita membagi kolom menggunakan float, pada pembahasan kali ini kita akan membagi teks atau artikel yang ada dalam website kita menjadi beberapa kolom menggunakan fungsi column-count dan column-gap .

Apasih fungsi dari column-count itu, column-count digunakan untuk menghitung jumlah kolom yang elemennya harus dibagi sedangkan column-gap sendiri digunakan untuk menentukan jarak antara kolom. Untuk lebih jelasnya saya akan memeberikan contoh properti properti CSS3 multi-colums;

Beberapa sifat multi kolom yang umum digunakan seperti ditunjukkan di bawah ini :

  • column-count : Digunakan untuk menghitung jumlah kolom yang elemennya harus dibagi
  • column-fill : Digunakan untuk memutuskan, bagaimana mengisi kolom
  • column-gap  : Digunakan untuk menentukan jarak antara kolom
  • column-rule  : Digunakan untuk menentukan jumlah aturan
  • rule-color : Digunakan untuk menentukan warna aturan kolom
  • rule-style : Digunakan untuk menentukan aturan gaya untuk kolom
  • rule-width : Digunakan untuk menentukan lebar
  • column-span : Digunakan untuk menentukan rentang antar kolom

 

Oke untuk lebih jelasnya silahkan ikuti contoh di bawah ini, silahkan teman – teman buat file dengan nama:

Multi_colums.html

kalau sudah silahkan buat struktur html di bawah ini;

Jika sudah silahkan teman – teman buat sebuah file css seperti di bawah ini, kita akan membuat file css untuk class multi dimana kita nantinya akan membagi paragaraf yang ada di kelas multi menjadi 4 colum. bagai mana caranya silahkan lihat css di bawah ini. Dan letakkkan CSS di bawah ini ke bagian tag Head.

Oke kalau sudah silahkan save, dan jalan pada browsernya kurang lebih hasilnya seperti di bawah ini jika membuat filenya dengan benar.

Cara Menggunakan Property CSS3 Multi Columns

Oke cukup mudah bukan  Cara Menggunakan Property CSS3 Multi Columns, semoga dapat bermanfaat.