Tutorial Coding

Cara Membuat Layout Card Responsif dengan CSS Grid

Redaksi
Tampilan layout card responsif dengan CSS Grid di layar laptop

Layout card responsif dengan CSS Grid bisa kamu buat hanya dengan beberapa baris CSS. Kuncinya ada pada kombinasi repeat(), auto-fit, dan minmax() yang membuat kartu menyesuaikan lebar container secara otomatis. Berikut langkahnya, mulai dari markup HTML, pengaturan grid, hingga penyesuaian saat kartu perlu diubah menjadi satu kolom.

Struktur HTML yang Rapi untuk Kumpulan Kartu

Mulai dari markup yang bersih. Satu kontainer pembungkus dan beberapa kartu di dalamnya sudah cukup. Gunakan elemen semantik seperti article atau section agar mudah dirawat.

<div class="card-grid">
  <article class="card">
    <h3>Judul Kartu 1</h3>
    <p>Deskripsi singkat konten.</p>
  </article>
  <article class="card">
    <h3>Judul Kartu 2</h3>
    <p>Deskripsi singkat konten.</p>
  </article>
  <!-- tambahkan kartu lain sesuai kebutuhan -->
</div>

Pastikan setiap kartu memiliki lebar yang fleksibel. Hindari menetapkan width tetap pada .card karena akan mengganggu perhitungan grid. Cukup atur padding dan border agar tampilan konsisten.

Membuat Grid Otomatis dengan auto-fit dan minmax

Inti dari layout card responsif ada di properti grid-template-columns. Dengan repeat(auto-fit, minmax(250px, 1fr)), browser menghitung sendiri berapa kolom yang muat dalam satu baris. Setiap kartu minimal berukuran 250px, dan jika ruang tersisa, kartu melebar mengisi container.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

Gunakan auto-fit alih-alih auto-fill jika ingin kartu yang ada mengisi lebar container. auto-fill menyisakan ruang kosong ketika jumlah kartu sedikit. Untuk tampilan galeri yang padat, auto-fit lebih sesuai.

Menambahkan Gaya pada Kartu

Setelah grid terbentuk, beri gaya pada kartu agar terlihat rapi. Atur padding, border-radius, dan bayangan tipis. Pastikan juga teks di dalamnya tidak meluber.

.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.card h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

.card p {
  margin-bottom: 0;
  color: #444;
}

Untuk konten yang panjang, tambahkan overflow-wrap: break-word pada kartu agar kata panjang tidak merusak layout. Jika kartu berisi gambar, atur max-width: 100% dan height: auto pada gambar.

Mengatur Breakpoint Tanpa Menulis Banyak Media Query

Dengan auto-fit dan minmax, kamu tidak perlu menulis media query untuk setiap ukuran layar. Grid menyesuaikan sendiri. Namun, ada kalanya kamu ingin kartu tetap satu kolom di layar sangat kecil, misalnya di bawah 400px. Tambahkan media query sederhana untuk mengurangi ukuran minimum kartu.

@media (max-width: 400px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.75rem;
  }
}

Jika ingin kartu tetap dua kolom di tablet, kamu bisa mengubah nilai minmax menjadi lebih kecil, misalnya 200px, pada breakpoint tertentu. Sesuaikan dengan kebutuhan konten.

Menangani Kartu dengan Tinggi Berbeda

Grid secara default membuat semua kartu dalam satu baris memiliki tinggi yang sama karena stretch. Ini biasanya diinginkan. Jika kamu ingin kartu memiliki tinggi sesuai kontennya, atur align-items: start pada container. Namun, untuk tampilan card yang rapi, tinggi seragam lebih enak dilihat.

Jika ada kartu yang tingginya berbeda jauh, pertimbangkan untuk memotong teks dengan line-clamp atau menambahkan tombol “Baca selengkapnya”. Ini menjaga kerapian visual.

Kombinasi dengan Flexbox untuk Konten di Dalam Kartu

Di dalam kartu, kamu bisa menggunakan Flexbox untuk menyusun elemen secara vertikal. Misalnya, judul di atas, deskripsi di tengah, dan tombol di bawah. Atur display: flex; flex-direction: column; height: 100% pada kartu, lalu beri margin-top: auto pada tombol agar selalu berada di bawah.

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card .btn {
  margin-top: auto;
  align-self: flex-start;
}

Dengan begitu, kartu tetap rapi meskipun panjang teksnya berbeda-beda. Untuk panduan layout dua kolom yang lebih umum, lihat Cara Membuat Layout Dua Kolom dengan CSS Grid dan Flexbox.

Uji di Berbagai Ukuran Layar

Setelah CSS selesai, uji tampilan di beberapa lebar viewport. Gunakan fitur responsive mode di DevTools. Perhatikan apakah ada kartu yang meluber atau teks yang terpotong. Jika menemukan masalah, periksa nilai minmax dan padding container.

Untuk memastikan tidak ada elemen yang tumpang tindih, baca Cara Menangani Overlap Layout CSS Tanpa Trial and Error. Overlap sering terjadi ketika lebar kartu dipaksa melebihi container.

Saat menguji, pastikan juga koneksi internet stabil agar hasil preview tidak terganggu. Kamu bisa memeriksa kualitas jaringan dengan 7 Metode Uji Konektivitas Jaringan: Ping hingga Monitoring.

Tips Tambahan Agar Layout Card Lebih Fleksibel

  • Gunakan grid-auto-rows: 1fr jika ingin semua baris memiliki tinggi yang sama, tetapi ini bisa membuat kartu pendek terlihat aneh.
  • Manfaatkan gap untuk mengatur jarak antar kartu, jangan gunakan margin pada kartu karena akan menggandakan jarak.
  • Untuk kartu yang dapat diklik seluruhnya, bungkus dengan <a> dan atur display: block pada kartu.
  • Jika ingin efek hover, tambahkan transisi pada box-shadow atau transform.

Hindari menetapkan tinggi tetap pada kartu karena akan merusak responsivitas. Biarkan konten yang menentukan tinggi, kecuali kamu memang ingin tinggi seragam dengan grid-auto-rows.

Ringkasan

Layout card responsif dengan CSS Grid dapat dibuat dengan sedikit kode. Kunci utamanya adalah repeat(auto-fit, minmax(250px, 1fr)) pada container, lalu atur gaya kartu dan tambahkan media query sederhana untuk layar kecil. Uji di berbagai ukuran dan pastikan tidak ada elemen yang meluber.

Pertanyaan yang Sering Diajukan

Apakah auto-fit dan auto-fill bisa diganti-ganti?

Bisa. auto-fit membuat kartu mengisi lebar container, sedangkan auto-fill menyisakan ruang kosong jika jumlah kartu kurang. Pilih sesuai tampilan yang diinginkan.

Berapa nilai minmax yang ideal untuk kartu?

Tergantung konten. Untuk kartu dengan teks sedang, 250px sampai 300px sudah cukup. Untuk kartu berisi gambar besar, gunakan nilai lebih besar seperti 300px.

Apakah perlu menggunakan media query jika sudah pakai auto-fit?

Tidak selalu. Namun, media query berguna untuk menyesuaikan padding, gap, atau mengubah grid menjadi satu kolom di layar sangat kecil.

Redaksi

Related Posts