membuat tampilan masonry grid / numpuk keatas
Untuk membuat tampilan Masonry grid dalam desain web, Anda dapat menggunakan CSS Grid atau JavaScript, tergantung pada preferensi Anda dan sejauh mana tingkat kompleksitas yang Anda inginkan. Di bawah ini, saya akan memberikan contoh tampilan Masonry grid dengan CSS Grid dan JavaScript.
#### Menggunakan CSS Grid:
1. HTML:
```
html
<div class="masonry-grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<!-- Tambahkan lebih banyak item di sini -->
</div>
```
<div class="masonry-grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<!-- Tambahkan lebih banyak item di sini -->
</div>
```
2. CSS:
```
css
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Kolom dinamis */
gap: 20px; /* Jarak antara item */
}
.grid-item {
background-color: #f0f0f0;
padding: 10px;
}
```
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Kolom dinamis */
gap: 20px; /* Jarak antara item */
}
.grid-item {
background-color: #f0f0f0;
padding: 10px;
}
```
#### Menggunakan JavaScript (dengan jQuery Masonry):
1. HTML:
```
html
<div class="masonry-grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<!-- Tambahkan lebih banyak item di sini -->
</div>
```
<div class="masonry-grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<!-- Tambahkan lebih banyak item di sini -->
</div>
```
2. JavaScript (menggunakan jQuery dan jQuery Masonry):
KODE JS PERTAMA
html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script>
$(document).ready(function () {
$('.masonry-grid').masonry({
itemSelector: '.mansory-item',
columnWidth: 200, // Lebar kolom
gutter: 20, // Jarak antara item
});
});
</script>
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script>
$(document).ready(function () {
$('.masonry-grid').masonry({
itemSelector: '.mansory-item',
columnWidth: 200, // Lebar kolom
gutter: 20, // Jarak antara item
});
});
</script>
```
KODE JS KEDUA (UNTUK ALTERNATIF)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script>
$(document).ready(function () {
var $grid = $('.mansory-grid').masonry({
itemSelector: '.mansory-item',
columnWidth: 200, // Lebar kolom
gutter: 20, // Jarak antara item
});
$grid.imagesLoaded().progress(function () {
$grid.masonry('layout'); // Memastikan grid direlayout setelah gambar dimuat
// Mengatur tinggi elemen-elemen grid agar tidak terpotong
$('.grid-item').each(function () {
var $item = $(this);
var itemHeight = $item.outerHeight(); // Tinggi elemen dengan margin dan padding
$item.css('min-height', itemHeight + 'px'); // Mengatur tinggi minimum agar tidak terpotong
});
});
});
</script>
Penjelasan,
mansory-grid adalah canvas atau div yang menaungi post yang berada di atas div item,
mansory-item adalah post per post yang berada dibawah div mansory-grid.
Dalam contoh ini, kita memiliki elemen-elemen dengan kelas `.grid-item` yang akan diatur dalam tampilan Masonry grid. Jika Anda menggunakan CSS Grid, gunakan properti `display: grid` pada container dan tentukan jumlah kolom yang akan dipilih secara otomatis dengan `grid-template-columns`. Jika Anda menggunakan JavaScript, Anda dapat menggunakan jQuery Masonry untuk mengatur elemen-elemen ini dalam tampilan Masonry grid.
Pastikan untuk mengganti isi dari `.grid-item` dengan konten atau elemen sesuai dengan desain Anda. Anda juga dapat menyesuaikan properti CSS dan opsi JavaScript sesuai dengan kebutuhan desain Anda.
---
Pastikan untuk mengatus element column-width: 0px; canvas 'div' yang menaungi post,
dan min-height: 0px; (jika diperlukan) pada tampilan tiap 'div' post.
Urutan cara pakai 'div class' nya seperti ini.
<body>
<div class="masonry-grid">
<!-- Item masonry -->
<div class="masonry-item">
<img src="gambar1.jpg" alt="Gambar 1">
<h3>Judul Posting 1</h3>
<p>Teks posting 1</p>
</div>
<div class="masonry-item">
<img src="gambar2.jpg" alt="Gambar 2">
<h3>Judul Posting 2</h3>
<p>Teks posting 2</p>
</div>
<!-- Dan seterusnya... -->
</div>
--
MEMBUAT TAMPILAN POSTING TERATAS TIDAK TERPOTONG
Catatan penting, bahwa menggunakan teknik mansory grid maka div class harus
harus satu persatu seperti contoh diatas, karena mansory grid akan membuat
tampilan utuh post hanya pada kolom pertama selanjutnya akan mengekor dan
berakita post teratas disamping post pertama akan terpotong.
Maka untuk membuat tampilan mansory grid dengan postingan teratas tidak terpotong
harus menggunakan teknik div diatas yakti satu div untuk satu kolom.