Membuat Card Masonry Menjadi Responsive Sesuai Grid

Membuat Card Menjadi Responsive sesuai grid – Pada kesempatan kali ini, saya akan memberikan satu tips bagi kalian yang sedang mencari referensi layout dengan bootstrap 4. Di artikel ini, kita akan membahas tentang layout card, tahukah kalian kalau di bootstrap 4 itu ada layout yang dinamakan Masonry. Hal ini pernah saya bahas di artikel sebelumnya yang berjudul Membuat Masonry Layout dengan Bootstrap 4. Permasalahan pada layout standard yang diberikan oleh bootstrap adalah kolom card yang dibuat tidak akan responsive sesuai breakpoint bootstrap. Sehingga akan ada sesuatu yang tidak pas ketika digunakan bersamaan dengan grid normal.

Berbeda dengan artikel tersebut, kali ini kita akan menerapkan system grid pada layout masonry menggunakan card. Di sini, kita akan mengatur ulang column-count default yang ada pada class .card-column dengan CSS berikut

@media (min-width:356px) {
      .card-columns {
        column-count: 6;
      }
  }

  @media (min-width:576px) {
      .card-columns {
        column-count: 6;
      }
  }
    @media (min-width:768px) {
      .card-columns {
        column-count: 6;
      }
  }
  @media (min-width:992px) {
      .card-columns {
        column-count: 4;
      }
  }
  @media (min-width:1200px) {
      .card-columns {
        column-count: 6;
      }
  }

 

Lalu, kita akan coba buat struktur layout menggunakan bootstrap 4 dengan kode di bawah ini.

<div class="container py-5 bg-faded">
    <div class="card-columns">
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600/888/000" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600/220022" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img img-fluid" src="//placehold.it/800x1230/000/fff" alt="Card image">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600/55ff66/000" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img img-fluid" src="//placehold.it/800x1230/cc4444/FFF" alt="Card image">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top img-fluid" src="//placehold.it/800x600" alt="Card image cap">
        </div>
    </div>
</div>

Jika sudah selesai, akan terlihat perbedaan ketika kita menggunakan layout masonry bawaan bootstrap dengan layout masonry menggunakan grid system di bootstrap 4. Semoga bermanfaat.

14 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat