Cara Membuat Card Artikel Responsif dengan CSS Grid

CSS Grid memudahkan pembuatan kartu artikel yang rapi tanpa menentukan lebar setiap kartu secara manual. Dengan minmax, jumlah kolom mengikuti ruang yang tersedia.

Hal yang perlu diperhatikan

• Kolom adaptif
• Jarak antarkartu konsisten
• Thumbnail proporsional
• Judul tidak bertabrakan

Cara menerapkannya

Mulailah dari versi paling sederhana dan pastikan struktur HTML tetap mudah dipahami. Setelah fungsi dasar bekerja, atur tampilan melalui CSS seperlunya. Coba skenario layar besar, layar kecil, serta kondisi ketika isi artikel lebih panjang dari perkiraan.

Contoh kode

<div class="demo-grid">
  <article class="demo-card"><h3>Artikel satu</h3><p>Ringkasan artikel.</p></article>
  <article class="demo-card"><h3>Artikel dua</h3><p>Ringkasan artikel.</p></article>
</div>
<style>
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.demo-card{padding:18px;border:1px solid #ddd;border-radius:12px}
</style>

Tips sebelum dipublikasikan

1. Tentukan lebar minimum berdasarkan isi.
2. Gunakan object-fit untuk gambar.
3. Periksa saat judul lebih dari dua baris.

Catatan untuk pengguna FajriLab

Contoh ini dibuat sebagai materi demonstrasi untuk menguji gaya artikel FajriLab. Sesuaikan kode, pengaturan, dan kebutuhan aksesibilitas sebelum digunakan pada situs produksi.

Saat artikel sebenarnya siap diterbitkan, ganti gambar sementara, perbarui isi sesuai hasil pengujian, lalu periksa tautan serta tampilan responsif. Artikel contoh ini tidak dimaksudkan sebagai klaim bahwa suatu produk atau fitur sudah tersedia.