Terkadang dibutuhkan suatu halaman yang terdiri dari beberapa kolom seperti yang tercetak pada koran. Salah satu keuntungan sebuah artikel terdiri dari beberapa kolom adalah kemudahan untuk membacanya. Bila artikel terlalu  panjang secara horizontal akan menyulitkan pembaca untuk menemukan baris berikutnya. Pada tulisan ini akan dibahas mengenai teknik pembuatannya artikel dengan layout beberapa kolom.

CSS3 memiliki kemampuan untuk mengatur tulisan atau artikel kedalam bentuk beberapa kolom. Kemampuan pengaturan yang dimiliki oleh CSS3 untuk kolom sudah sesuai dengan yang dibutuhkan.

Browser Pendukung

Kemampuan ini didukung hampir oleh semua browser yang ada, seperti yang terlihat pada bagan tabel berikut ini:

Kompatibilitas CSS3-Column. Sumber: http://caniuse.com

Tabel 1. Kompatibilitas CSS3-Column

Properti

CSS3-Column memberikan properti yang cukup lengkap sehingga tata layout dapat di sesuaikan dengan kebutuhan. Properti tersebut adalah:

  1. column-count: untuk mengatur jumlah kolom yang diinginkan.
  2. column-width:  untuk mengatur ukuran lebar setiap kolom. Namun ukuran ini dapat berubah otomatis oleh browser sesuai dengan lebar layar.
  3. column-gap: untuk mengatur jarak antar kolom.
  4. column-rule-width: untuk mengatur pembatas antar kolom .
  5. column-rule-style:  seperti halnya border maka bentuk pembatas dapat juga diatur .
  6. column-rule-color: untuk mengatur warna pembatas.
  7. column-span:  jika diperlukan untuk menggabungkan beberapa kolom maka dipergunakan properti ini. Misalkan untuk judul artikel.

Dari penjelasan diatas maka dapat disimpulkan bahwa fasilitas CSS3-Column sudah memberikan fasilitas yang memadai.

Untuk latihan awal hanya diperlukan beberapa baris untuk mengatur tampilan 3 kolom dengan jarak antar kolom 20px;

.cols3 {
column-count: 3;
column-gap: 20px;
}

Contoh berikut ini adalah menambahkan penggunaan properti untuk memberikan batas antar kolom yaitu berupa garis berukuran 1px, berwarna hitam dan bergaya solid.

.cols3 {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #000;
}

Jika dibutuhkan menggabungkan beberapa kolom untuk judul artikel maka digunakan properti column-span. Penggunaan seperti contoh berikut ini.

.cols3 h1{
column-span: all;
}

Demo

Penggunaan CSS3-Column ini sepertinya hal penggunaan CSS yang lainnya yaitu dapat menggunakan tags <div>. Berikut ini tampilan yang dihasilkan oleh CSS-Column, seperti dijelaskan sebelumnya lebar kolom menyesuaikan lebar layar browser.

ScreenShot054Gambar 1. Tampilan CSS3-Column pada layar lebar

ScreenShot055Gambar 2. Tampilan CSS3-Column pada layar lebih sempit.

Berikut ini kode lengkap dari tampilan di atas.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 column demo</title>
<style type='text/css'>

.cols3 {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #000;

-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #000;

column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}

.cols3 h1 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}

</style>
</head>
<body>

<div class='cols3'>

<h1>Cras Sodales Malesuada Neque A Mollis</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum, purus mattis porta varius, ligula ligula facilisis dolor, eu venenatis arcu est a neque. Aenean lectus libero, tempus quis ultricies non, cursus sed odio. Donec at dui at tellus varius commodo eu eu lorem. In faucibus egestas tristique. Nunc quis turpis ipsum, eget sagittis nunc. Nam ullamcorper venenatis vulputate. Cras dictum fermentum elementum. Aenean turpis augue, mollis vel rutrum vitae, fermentum a ante. Curabitur ornare euismod felis vitae mollis. Cras mauris purus, ultrices nec posuere fermentum, ultrices a diam. Aenean vel metus urna, vel fermentum tellus.</p>

<p>Pellentesque nunc elit, elementum quis dignissim suscipit, faucibus sit amet velit. Etiam rhoncus pretium justo at fringilla. Proin eleifend, odio sit amet vehicula condimentum, massa nisi tincidunt tellus, sed hendrerit enim elit a lacus. Sed nec sollicitudin libero. Ut tristique feugiat rutrum. In at lectus at justo facilisis tincidunt ac ac risus. Curabitur cursus imperdiet nisi et varius. Aliquam condimentum placerat sapien sit amet tempor. Aliquam vitae arcu ligula. Cras sodales malesuada neque a mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin arcu ligula, vestibulum ac suscipit ut, consequat eu enim. Integer vitae leo purus, quis ultrices nisi. Duis vel tristique elit.</p>

<p>Proin id mi eros. Vivamus a rhoncus justo. Nam eu euismod metus. Morbi sit amet placerat metus. Nulla porta sodales pulvinar. Ut et nulla lectus, in tempor elit. Donec at augue sed ipsum semper accumsan. Donec ullamcorper placerat magna, eget sodales purus laoreet a. Nunc tincidunt porta libero, non fermentum arcu faucibus ac.</p>

<p>Duis ac lectus ut tortor hendrerit tempor. Nam vel felis hendrerit neque accumsan sodales luctus cursus turpis. Morbi accumsan sagittis auctor. Nullam mi felis, eleifend vel faucibus nec, eleifend ut lectus. Ut vel sapien ante, quis ornare elit. Phasellus elit sapien, faucibus in feugiat sed, gravida eu lacus. Vestibulum euismod lobortis massa, ut tempor odio consequat vel. Cras tortor ligula, tempus a rhoncus sit amet, hendrerit at nisi. Vestibulum scelerisque scelerisque mi, vitae lacinia magna elementum id. Donec fermentum orci at nibh molestie ac varius metus sollicitudin. In hac habitasse platea dictumst. Sed porttitor dictum erat, ac fringilla mi luctus vel. Duis et turpis enim. Nunc feugiat ipsum id arcu fringilla vitae porta turpis semper. Fusce euismod nisi sit amet enim adipiscing dapibus.</p>

</div>
</body>
</html>

Kesimpulan

Penggunaan CSS-Column sangatlah mudah dan tampilan dapat disesuaikan dengan kebutuhan. Tampilan layout mengikuti lebar dari lebar browser jika rubah oleh penggunanya. Dengan kemudahan dan kehandalan dari CSS-Column mungkin bisa jadi pertimbangan untuk menggunakannya pada layout website Anda.