Cara Menggunakan Property CSS3 Multi Columns

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;

<html>
   <head>
   <title> Multi Colums</title>
   </head>
   <body>
   
      <div class="multi">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      
   </body>
</html>

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.

<style>
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            
            /* Column gap property */
            -webkit-column-gap: 40px; 
            -moz-column-gap: 40px; 
            column-gap: 40px;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </style>

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

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