Mecha versi 2.6.4 sudah dirilis!

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/

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/

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 :)

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/

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.