Pembuatan Multi Kolom Dengan CSS3

 Seperti yang sudah pernah saya bahas pada posting sebelum ini bahwa kode CSS3 di bedakan menjadi 2, yaitu -moz- untuk mozilla/firefox dan -webkit- untuk google chrome. Jadi kita akan mempelajari ke2 kode itu untuk pembuatan multi kolom ini.
CSS untuk pembuatan kolom memiliki berbagai variasi/model. Yaitu, pembuatan berdasarkan lebar, berdasarkan jumlah kolom, dan menambahkan garis pembatas juga bisa.

1. Berikut pembuatan berdasarkan lebar :

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam multi-kolom condimentum. Praesent euismod auctor dui. Nunc ut leo vel css3 magna adipiscing tempor. Nuedges pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla multi-kolom css3 sagittis, odio quis porta nonummy, mauris nuedges arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc nuedges vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis css3 justo. Sed lorem. Sed nuedges vel neque in ipsum gravida nonummy.

Kode yang di gunakan untuk pembuatan kolom seperti di atas adalah column-width. Menentukan kolom berdasarkan lebar. Berikut adalah bentuk kode secara keseluruhan.

-moz-column-gap: 1em;/*jarak  antar kolom*/
-moz-column-width: 13em; /*Lebar kolom*/
-webkit-column-gap: 1em; /*jarak  antar kolom*/
-webkit-column-width: 13em;/*Lebar kolom*/

2. Sekarang pembuatan berdasarkan jumlah kolom

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam multi-kolom condimentum. Praesent euismod auctor dui. Nunc ut leo vel css3 magna adipiscing tempor. Nuedges pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla multi-kolom css3 sagittis, odio quis porta nonummy, mauris nuedges arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc nuedges vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis css3 justo. Sed lorem. Sed nuedges vel neque in ipsum gravida nonummy.

Pembuatannya menggunakan column-count, menentukan kolom berdasarkan jumlahnya. kodenya adalah seperti ini.

-moz-column-gap: 1em;/*jarak  antar kolom*/
-moz-column-count: 4; /*Jumlah kolom*/
-webkit-column-gap: 1em; jarak  antar kolom*/
-webkit-column-count: 4;/*Jumlah kolom*/

3. Menambahkan garis pembatas pada kolom. Contohnya seperti ini

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam multi-kolom condimentum. Praesent euismod auctor dui. Nunc ut leo vel css3 magna adipiscing tempor. Nuedges pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla multi-kolom css3 sagittis, odio quis porta nonummy, mauris nuedges arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc nuedges vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis css3 justo. Sed lorem. Sed nuedges vel neque in ipsum gravida nonummy.

Anda hanya tinggal menambahkan kode column-rule. Berikut bentuk kodenya

-moz-column-rule: 1px solid black;/*Ukuran, tipe dan warna garis*/ 
-webkit-column-rule: 1px solid black;/*Ukuran, tipe dan warna garis*/

Kesimpulan : Dapat di ambil kesimpulan bahwa

column-width : /*Lebar kolom*/
column-count : /*Jumlah kolom*/
column-rule : /*garis pembatas*/
column-gap : /*harak kolom*/

Tambahan : Jangan lupa untuk membedakan antara -moz- untuk mozilla/firefox dan -webkit- untuk google chrome

Sekian pembelajaran kita hari ini. TERIMA KASIH !!!