CSS3 Kolom

Tabel Konten
  1. Sintaks CSS Kolom 
  2. Jarak dan Pembatas 
  3. Membuatnya Menjadi Responsif 
  4. Lebar Kolom Tetap 
CSS3 Column-Count

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 sama besar.

Properti CSS kolom pada peramban Opera sudah mengikuti standar CSS3 dan tidak memerlukan prefiks -o- seperti pada umumnya. Sampai saat ini Internet Explorer masih belum mendukung CSS Kolom.

Lihat Demo

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:

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

Lihat Demo

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

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 kembali menjadi tiga properti yang terpisah:

/* 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;
}

Lihat Demo

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:

/* 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;
  }
}

/* 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;
  }
}

Lihat Demo

Lebar Kolom Tetap 

CSS Kolom juga memungkinkan Anda untuk menciptakan kolom-kolom dengan lebar yang tetap, yaitu dengan menggunakan properti column-width:

p {
  -webkit-column-width:150px;
  -moz-column-width:150px;
  column-width:150px;
}

Cara kerja properti ini adalah dia akan menciptakan kolom sebanyak mungkin dengan lebar masing-masing kolom sebesar 150 piksel (berdasarkan contoh di atas) selama masih ada ruang yang tersisa di sebelahnya.

Anda tidak perlu mendeklarasikan properti column-count jika Anda telah menggunakan properti ini. Jumlah kolom akan menyesuaikan diri terhadap lebar area yang tersisa. Untuk penerapan yang lebih mendetail bisa Anda baca di halaman ini ⇒ Efek Masonry Hanya dengan CSS

9 Komentar

  • abang ichal

    sy baca di chielarsip,, klo colomn countnya auto tanpa pake @media screen .. itu sudah responsivv..

    • Taufik Nurrohman

      Tapi Saya coba nggak keluar kolomnya. Kalaupun misalnya peramban bisa secara otomatis membelah kolom jika kita memakai nilai auto, terus pertanyaannya: Jumlah kolomnya ada berapa?

      • abang ichal

        klo pke auto:
        biasanya klo pke komputer width 1024 ituu kolomnya bisa menjadi 4.
        klo pke width 1024++ itu kolomnya bisa 5...

  • Unknown

    Nah Ini baru saya sangat paham dan mengerti serta jelas, sekalian juga bilang selamat Menunaikan Ibadah Puasa... jangan lupa mampir di blog saya yang campur aduk tak karuan...

  • Bayu Handono

    saya pernah coba yg seperti ini, ternyata bisa dibikin responsive :-bd

  • Surga Kenari

    luar biasa mas Taufik :-bd

  • Unknown

    wlakoakaokao....
    sangat membantu kalau lagi malas malas-an pake system grid.
    :-bd

Komentar telah ditutup.