Membuat tampilan mansory grid

 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>

   ```

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;

   }

   ```

#### 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>

   ```

2. JavaScript (menggunakan jQuery dan jQuery Masonry):

   ```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: '.grid-item',

         columnWidth: 200, // Lebar kolom

         gutter: 20, // Jarak antara item

       });

     });

   </script>

   ```

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.