Membuat Card Masonry Menjadi Responsive Sesuai Grid

14/01/2020    Maykhel David    29     Website

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.

Web Design, Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More