Posts

Showing posts matching the search for mansory

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>    ``` 2. CSS:    ``` css    .masonry-grid {      display: grid;      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Kolom dinamis */      gap: 20px; /* Jarak antara item */    }    .grid-i...

Mengubah tampilan post beranda menjadi beberapa kolom

display : grid ; grid-template-columns : repeat(4, 1fr) ; grid-gap : 15 px ; margin : 40 px  0 ; align-items : start ; /* display grid & grid-template-columns adalah arutan wajib yang diterapkan grid-template-colums:  repeat(auto-fill, minmax(200px, 1fr)) (dengan aturan itu dapat menyesuaikan banyak kolom dengan lebar halaman dan dapat disesuaikan dengan mengganti ukuran px) */ MANSORY GRID adalah istilah untuk tampilan yang lebih kompleks tampilan tersusun dalam beberapa kolom dan kemudian post saling naik ke atas menyesuaikan tempat

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-ite...