Free Downloads

Sebelum CSS3, kita biasanya membuat layout kolom dengan bantuan CSS Float atau sistem grid. Tapi saat ini kita bisa menggunakan CSS untuk membelah paragraf menjadi kolom-kolom. Meskipun fiturnya masih terbatas, yaitu hanya bisa membelah, menentukan jarak antar kolom dan memberi garis pemisah, tapi secara keseluruhan, CSS kolom sudah bisa dikatakan sangat membantu terutama karena kemampuannya dalam mengisi setiap kolom dengan jumlah teks yang sama rata.

Sintaks CSS Kolom

p {
  -webkit-column-count:3; /* Chrome & Safari */
  -moz-column-count:3; /* Firefox */
  column-count:3; /* Standar CSS3 & Opera */
}

Kode di atas akan membelah paragraf menjadi tiga buah kolom.

Jarak dan Pembatas

Selain menentukan jumlah kolom, CSS kolom juga bisa menentukan jarak antar kolom dan juga mengatur garis pembatas antar kolom. Berikut ini adalah contoh cara menentukan jarak antar kolom sebesar 100px:

Sintaks CSS

p {
  -webkit-column-gap:100px;
  -moz-column-gap:100px;
  column-gap:100px;
}

Untuk menciptakan garis pembatas antar kolom, kita menggunakan properti column-rule yang pada dasarnya memiliki cara kerja sama persis dengan properti border:

Sintaks CSS

p {
  -webkit-column-rule:5px solid #ccc;
  -moz-column-rule:5px solid #ccc;
  column-rule:5px solid #ccc;
}

Dan seperti halnya properti border, mereka juga bisa dibagi menjadi tiga properti terpisah:

Sintaks CSS

/* column-rule:column-rule-width column-rule-style column-rule-color; */
p {
  -webkit-column-rule-width:5px;
  -moz-column-rule-width:5px;
  column-rule-width:5px;
  -webkit-column-rule-style:solid;
  -moz-column-rule-style:solid;
  column-rule-style:solid;
  -webkit-column-rule-color:#ccc;
  -moz-column-rule-color:#ccc;
  column-rule-color:#ccc;
}

Membuatnya Menjadi Responsif

Meskipun CSS Kolom akan secara otomatis menyesuaikan lebar masing-masing kolom dengan ukuran lebar elemen pembungkus seperti halnya saat kita menggunakan satuan persentase, tapi saat ukuran layar menyempit, kolom-kolom di dalamnya juga akan ikut menyempit dan membuat kalimat-kalimat di dalamnya menjadi sulit untuk dibaca. Untuk menyiasatinya, kita bisa menggunakan media queries dan mengurangi jumlah kolom ketika ukuran layar sedang berada pada ukuran lebar tertentu:

Sintaks CSS

/* Ubah jumlah kolom menjadi 2 saat lebar layar maksimal berada pada 800 piksel */
@media screen and (max-width:800px) {
    p {
      -webkit-column-count:2;
      -moz-column-count:2;
      column-count:2;
    }
}
  

Sintaks CSS

/* Satukan semua kolom saat lebar layar maksimal berada pada 600 piksel */
@media screen and (max-width:600px) {
    p {
      -webkit-column-count:auto;
      -moz-column-count:auto;
      column-count:auto;
    }
}