Artikel

Membuat Komponen Card Responsif dengan CSS Grid

CSS Grid memudahkan layout kartu agar rapi di desktop dan mobile.

Gunakan grid dengan kolom fleksibel agar kartu otomatis menyesuaikan lebar layar.

CSS
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

Di breakpoint mobile, cukup ubah menjadi satu kolom agar konten tetap nyaman dibaca.