Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Satu fitur dari CSS3 adalah kemampuan membuat multiple column pada text layout seperti yang bisa kita lihat di surat kabar.Mereka yang terbiasa membuat multiple column menggunakan CSS2 akan merasakan kemudahan dengan adanya fitur dari CSS3 ini. Membuat multiple column menggunakan CSS2 harus menggunakan float untuk membuat multiple column tersusun sejajar. Hadirnya CSS3 membantu web designer tidak lagi menggunakan float sebagaimana di CSS2.

Namun sebelum kita lanjut ke property dari multiple column berikut ini adalah contoh multiple column dengan tiga kolom (Gambar 1) .

Gambar 1

 

Property

Berkaitan dengan multiple column ada 6 property yang bisa digunakan :

  • column count
  • column width
  • column gap
  • column rule
  • column span

 

Column Count

Untuk menentukan berapa kolom yang kita butuhkan kita menggunakan property column count. Katakan kita butuh 3 kolom maka :

HTML

<div class="multiple">
<p>Lorem ipsum dolor sit amet, porta ultricies tortor nec vestibulum risus feugiat, ultricies sit in vel aptent, ut quisque et eget hymenaeos consequat, mi ornare pede ullamcorper laoreet vel. Nunc neque tincidunt nam odio, mauris nec dui, lobortis accumsan a placerat vel, aenean augue morbi cras faucibus velit, neque ut ac. Libero molestie magna montes nulla, sit donec convallis nullam. Eu pulvinar quam est duis, tellus elit adipiscing lorem velit fusce arcu, nam nulla voluptatibus a odio vitae. Adipiscing ut vestibulum aliquam pellentesque iaculis, per mollis fermentum mauris accumsan morbi, nulla eu dapibus sit, proin magna. Maecenas pulvinar, ac metus amet vel id taciti. Accumsan pede sed, nisl vivamus lorem luctus beatae sed rutrum, mauris pellentesque diam vestibulum, sapien diam nunc sodales dapibus aptent, arcu eget sit pretium etiam sed. Quam omnis tortor rhoncus sit fusce sit, elementum duis curabitur mi dignissim.<p><div>

Pada kode HTML diatas bisa dijelaskan kita membuat div dengan class="multiple" lalu kita isi essay tersebut dengan lorem ipsum.

CSS

 .multiple{
     column-count: 3;
     column-gap: 10px;
   }

column count menentukan berapa banyak kolom, column gap menentukan berapa jarak antar kolom.

Gambar 2

 

Column Width

Kita bisa menentukan berapa lebar kolom yang kita kehendaki. Dengan column width kita bisa menentukan berapa lebar kolom yang dikehendaki. Namun penggunaan column width dan column count tidak perlu kita gunakan secara bersamaan, cukup digunakan salah satunya saja karena nilai defaultnya auto.

Sebagai contoh kita menggunakan column width : 250px maka pada saat yang sama column count tidak perlu kita gunakan, karena CSS akan menentukan sendiri berapa jumlah kolom maksimal. Begitupun sebaliknya bila kita telah menentukan berapa jumlah kolom yang dikehendaki katakanlah column count : 3 maka pada saat yang sama kita tidak perlu lagi menggunakan column width karena CSS akan menentukan sendiri berapa lebar maksimal dari kolom tersebut.

column-width : (length)

 

Column Gap

Di antara kolom-kolom ada jarak yang bisa kita berikan sehingga membantu readability pengguna saat membaca content. Dengan column gap kita meberikan jarak/space di antara kolom.

column-gap : (length)

 

Column Rule

Agar antara satu kolom dengan kolom yang lain tampak lebih tegas terpisah kita bisa memberikan garis vertikal di antaranya. Untuk itu bisa menggunakan property column rule, selanjutnya kita bisa mengatur style dari garis tersebut dengan property di bawah ini berikut valuenya :

  • column-rule-width: 1px;
  • column-rule-style: solid;
  • column-rule-color: #000;
  • column-rule: 1px solid #000; /* shorthand version */

Pada contoh di atas kita tinggal mengganti value dari property column-rule-width, column-rule-style, column-rule-color

 

Gambar 3

 

Column Span

Dengan column span memungkinkan kita memberi judul pada pada content yang memiliki multiple column dan merentang melewati kolom-kolom

column-span : all

 

Gambar 4

Kita bisa lihat pada Gambar 4 di atas, judul "Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing" merentang secara horizontal melewati ketiga kolom pada content.