Jika kita membuka pinterest, kita akan disuguhkan dengan tampilan foto yang disusun dengan ukuran berbeda namun tetap terlihat rapih dan menarik bukan? Yapss, peletakan foto seperti itu disebut dengan Masonry.
Ada begitu banyak cara membuat Masonry Gallery, namun kali ini saya akan membagikan cara cepat membuatnya.
Step 1
Siapkan struktur html seperti berikut:
<div class="gallery-container">
<img src="/assets/img/1.jpg" alt="photo-1" class="photo" />
<img src="/assets/img/2.jpg" alt="photo-2" class="photo" />
<img src="/assets/img/3.jpg" alt="photo-3" class="photo" />
<img src="/assets/img/4.jpg" alt="photo-4" class="photo" />
<img src="/assets/img/5.jpg" alt="photo-5" class="photo" />
<img src="/assets/img/6.jpg" alt="photo-6" class="photo" />
</div>Pastikan tiap image yang diimport melalui img src memiliki nama class yang sama.
Step 2
Buatlah css sebagai berikut:
.gallery-container {
columns: 4;
}
.photo {
width: 100%;
max-height: 300px;
margin-bottom: 1rem;
filter: saturate(0);
cursor: pointer;
transition: ease 0.3s;
}
.photo:hover {
filter: saturate(1);
transform: scale(1.088);
box-shadow: 0 0 60px 30px rgba(0, 0, 0, 0.3);
}Untuk mengatur foto menjadi beberapa bagian kolom, kita hanya perlu mengganti value dari property columns yang ada pada class gallery. Abaikan hover dan property pada layout terkecuali width dan max-height jika tidak ingin mengikuti style seperti di atas.
Width 100% digunakan untuk mengatur foto pada tiap kolom agar memiliki lebar memenuhi 1 kolom, sedangkan max-height digunakan untuk mengatur maksimal tinggi foto yang kita inginkan.
Untuk menambah kerapihan, tambahkan margin bottom sebesar 1rem atau 16px.
Berikut adalah hasilnya
