Efek Masonry Hanya dengan CSS

Tabel Konten
  1. Item Bukan Gambar 
CSS3 Masonry Layout

Teknik ini sudah pernah dibahas dengan cukup detail di CSS-Tricks. Hanya saja Saya tidak habis pikir mengapa beliau tetap mempertahankan deklarasi column-count untuk memecah area menjadi beberapa kolom dan menggunakan media queries untuk mengurangi jumlah kolom pada saat ukuran layar peramban menyempit. Padahal jika kita sudah menentukan lebar masing-masing item dengan ukuran yang sama, kita bisa menggunakan column-width untuk menentukan lebar kolom tetap tanpa harus melibatkan media queries untuk mengurangi jumlah kolom pada saat ukuran layar semakin sempit. column-width akan menciptakan kolom-kolom dengan jumlah yang bisa menyesuaikan diri berdasarkan ruang yang tersisa. Sudah tertulis dengan jelas dalam spesifikasi:

.container {
  column-width:150px;
  column-gap:5px; /* Margin kanan/kiri antarkolom */
}

img {
  display:block;
  width:100%;
  height:auto;
  margin:0 0 5px 0; /* Margin bawah antargambar */
}

Lihat Demo

Item Bukan Gambar 

Ada satu hal yang harus diperhatikan jika Anda ingin menciptakan efek/tata letak seperti ini pada elemen yang bukan merupakan gambar, yaitu deklarasi display berupa inline-block. Mendeklarasikan perintah ini akan mencegah perpotongan yang tak terduga pada masing-masing item karena CSS3 Kolom secara normal akan berusaha untuk membuat masing-masing kolom menjadi sama tinggi. Beberapa harus terpaksa dipotong di bagian bawah mengingat properti CSS ini memang sebenarnya berbasis teks:

.container {
  column-width:150px;
  column-gap:5px; /* Margin kanan/kiri antarkolom */
}

.item {
  display:inline-block; /* Mencegah pemotongan item yang tak terduga */
  margin:0 0 5px 0; /* Margin bawah antaritem */
  padding:10px;
  background-color:black;
  color:white;
}

Lihat Demo


Ini yang Saya maksud sebagai perpotongan yang tidak diduga dan tidak dikehendaki:

Item terpotong pada akhir kolom pada tempat yang salah.
Teks terpotong pada bagian bawah untuk memastikan agar masing-masing kolom memiliki tinggi yang sama.

Tidak tahu apa itu Masonry?

44 Komentar

  • Unknown

    Nice Info Sob... :-bd

  • Admin

    ternyata dalam pemikiran saya yang dulu itu sama mas, tidak semestinya menggunakan media queries untuk mengurangi jumlah kolom. secara keseluruhan kita bisa andalkan column-width menentukan lebar, pengalaman yang berharga mas \o/

  • BloggerSpice

    superb...thanks for sharing

  • budkalon

    Wew, bener juga ya, pake CSS3 kolom :-bd

  • Anonim

    mantap tenannn :-bd

  • Kang Ismet

    simple ternyata ya.. top markotop \o/

  • no data

    mantab kang :) salam damai dari blogger sulawesi :D
    - damai -

  • Kang Kapuk

    Yang ane cermati dari materi diatas, justru pada CSS yang ini
    column-gap:5px;
    Apakah ada perbedaan dengan dengan margin:0 5px;, atau bisa diartikan sama saja

    • IRIL SAGITA

      Iya baru tau tentang hal ini akau kak, mohon penjelasannya lebih detil kak taufik ?

    • Taufik Nurrohman

      Kolom Saya gambarkan sebagai *****
      Ini adalah hasil tampilan dari deklarasi margin:0 5px yang diterapkan pada tiga buah kolom:

      [5px] ***** [5px|5px] ***** [5px|5px] ***** [5px]

      Ini adalah hasil tampilan dari deklarasi column-gap:5px menggunakan CSS3 Kolom:

      ***** [5px] ***** [5px] *****

      Hasilnya akan sangat berbeda. Selain itu ada juga istilah margin collapsing, yaitu sebuah keadaan ketika dua buah elemen yang berhadapan, dimana masing-masing sisi yang berhadapan memiliki margin dengan besaran tertentu, maka salah satu margin yang ukurannya lebih kecil akan luluh tergantikan oleh margin yang lebih besar pada sisi yang lainnya. Ini berlaku untuk elemen blok:

      <!-- Yang kita harapkan: -->
      <div style="margin-bottom:5px;"> ... </div>
      [5px]
      [20px]
      <div style="margin-top:20px;"> ... </div>
      <!-- Hasil yang didapatkan: -->
      <div style="margin-bottom:5px;"> ... </div>
      [20px]
      <div style="margin-top:20px;"> ... </div>

      Sikap ini akan menghilang jika masing-masing elemen dikenai deklarasi float bernilai left atau right, atau dikenai posisi absolut:

      <div style="margin-bottom:5px;float:left;width:100%;"> ... </div>
      [5px]
      [20px]
      <div style="margin-top:20px;float:left;width:100%;"> ... </div>

      Kesimpulannya adalah, karena hasilnya yang tidak konsisten dan terkesan rumit, dan biasanya kita juga hanya butuh menerapkan margin pada sela-sela kolom saja, maka lebih baik gunakan column-gap yang lebih konsisten. Secara, kalau kita ingin menambahkan margin kiri dan kanan pada setiap item, lalu yang ingin didorong oleh margin tersebut itu apa? (di sisi kanan maupun kiri sudah tidak ada elemen lagi, masing-masing item berada sendirian di dalam kolom).

      • Suwardi

        Saya masih binggung, Niat hati mau nanya juga column-gap yang di permasalahkan yang berhubungan dengan masalah perpotongan kolom-kolom item yang tidak layak sehingga tidak kelihatan indah dan menggangu tapi sudah ada yang menanyakan dan sudah di bahas jadi cuma bisa bilang Terima kasih kang kapuk yang sudah bertanya dan mas taufik yang sudah menjelaskan panjang lebar.

  • Anonim

    Perlu pelan-pelan ini untuk mempelajarinya kodenya juga lumayan banyak :)

  • Beben Koben

    kalau berbicara ttg attr column- jd inget ama attr calc :-bd

  • no data

    simple ternyata ya.. top markotop \o/

  • M. Alex Joenaedi

    Luarbiasa mas, saya hanya bisa kagum, terimaksih banyak ilmunya mas

  • Goro

    mau tanya diluar tema mas...
    gimana ya cara pasang generator border radius di blog sperti punya mas....

    salam sukses ... \o/

  • Damar Zaky

    pro.

  • Unknown

    Artikel yang sangat bermanfaat.
    Dengan hanya menggunakan CSS3 efek masonry ternyata dapat dibuat.

    tapi bagi seorang web design cara ini masih jarang untuk diterapkan karena pertimbangan browser yang mendukung CSS3 (column-width dan column-gap) umumnya perambaan modern dan diluar sana masih ada orang yang menggunakan komputer dengan IE9 (perambaan lama) kebawah.

    • kontol ajing pepek

      iya betul ini, ane masih milih pake margin dibanding column-gap.

  • Anonim

    sekarang saya baru tau makasih banyak :)

  • Saeful Rahman

    css pun jadi. :-d

  • Unknown

    butuh konsentrasi buat menerapkannya :-bd :-bd .

  • Salim

    Update Galleria, gak perlu lagi pakai masonry... \o/

  • Ichi Hikaru

    Baca ginian jam 4 pagi dan blom tidur ... kpala ngebul . Total kang materinya ... :-bd

  • uki

    Sip.... :-bd

  • Sopala Multapa

    Yang saya tertarik disini adalah efect di " TENTANG " keren mas

  • Indra DP

    nice share :-bd
    ditunggu kunjungan baliknya mas bro.

    http://indradp-share.blogspot.com/

  • Muhamad Ishak Hanapi

    Mas Ada Template 2 Kolom Gk ? :) Kalo Ada Ane :-bd Likers

  • MbahDoyok

    kang nggon tombol close latest comment ketutup tombol maintanceee

  • Anonim

    keren nih DTE, baru lihat lagi.. Wajah baru semangat baru ya :)
    ane simpan dan pelajari dulu script CSS nya, siapa tahu nanti dibutuhkan.

  • no data

    om taufik hebat, DTE:] Full jquery :)
    - salam damai -

    • Kang Ismet

      nih yang paling rajin blogwalking :-d

  • Anonim

    bisa dikasih efek transisi ga mas?

  • Elbuy

    Aduh. pusing lagi melihat kode-kode pemrograman web pdahal waktu itu rajin belajar kotak-atik kode web. tapi berhenti karena situasi. akhirnya lihat kode di atas bikin pusing,hehe

  • kontol ajing pepek

    emang lebih oke pakai column-width untuk memecah beberapa konten tapi tetap menyesuaikan diri sama lebar browser. saya juga gak abis pikir si chris pake column-count.
    by the way, sistem notifikasi komentarnya kemana nih bro? kemaren² masih kelihatan.

  • Anonim

    saya coba pelajari dulu mas...!

  • Anonim

    Cuma mau ngasih info ni kak, Saya masih menunggu postingan selanjutnya kak ?

  • Unknown

    kang ada postingan yang membahas seperti ini : http://tympanus.net/codrops/2012/12/13/sticky-captions-concept/ :D

    susah kalo musti di download. juga itu mereka bikin kayaknya di utamakan ke wordpress juga

    • Taufik Nurrohman

      Semua file unduhan itu bentuknya HTML statis, tidak mungkin kalau cuma diutamakan ke Wordpress saja.

  • Unknown

    Mas Kalau Efek Masonry nya di tetapkan ke Postingan (seperti pulsk) bagaimana ya?

  • Fahru Rofi

    udah saya coba di blog saya, dan berhasil seperti matriks dimensi 3, tapi tampilan post urutannya dari yang terbaru itu vertikal (atas ke bawah terus ke kekanan), kalo pake js masonry, urutan post itu horizontal (atas ke kanan terus kebawah), yang saya ingin tahu apakah ada pengaturan khusus agar urutan post css masonry sama seperti js masonry?

    js masonry pada browser lama (mozilla 19 -) tidak tampil apapun :'(

    • Taufik Nurrohman

      Itu salah satu kekurangan dari metode ini (soal urutan). Tidak nyangka ada juga yang tanya soal ini.

      • Fahru Rofi

        iya tetep saya gunakan karena template awal, postingan kurang rapi sebelum js masonrynya jalan :D
        dan saya gunakan juga untuk sidebar footer, hasilnya menurut saya juga pas untuk blog saya. thanks buat jawabannya pak

  • Dwi

    ka taufik, ajarin bikin efek loading kayak blog kang ismet dong ;)

Komentar telah ditutup.