Step 4 - Layout Responsive Tanpa Ribet

Bangun layout responsif dengan pendekatan sederhana: mobile-first, grid secukupnya, dan fallback aman.

Responsive bukan soal banyak media query. Responsive adalah soal keputusan layout yang benar dari awal.

Strategi yang dipakai

• mulai dari mobile dulu
• tambah kompleksitas saat layar membesar
• hindari hardcoded width berlebihan

Step praktik

Step 1: Mobile-first

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

Step 2: Lindungi konten dari overflow

Tambahkan minmax(0, 1fr) untuk mencegah elemen meledak keluar grid.

Step 3: Prioritaskan konten penting

Di mobile, urutkan komponen berdasarkan urutan baca, bukan berdasarkan dekorasi desktop.

Step 4: Uji 3 titik lebar

• 375px (hp)
• 768px (tablet)
• 1280px (desktop)

Studi kasus nyata

Kasus: Landing page UMKM

Masalah: di mobile CTA turun jauh, testimoni pecah.
Solusi: mobile-first grid + prioritas urutan konten.

Hasil:

• CTA terlihat lebih cepat
• scroll lebih pendek
• conversion lebih stabil antar device

Checklist latihan

• Ubah 1 layout desktop jadi mobile-first
• Pastikan tidak ada horizontal scroll
• Uji 3 breakpoint utama
• Catat elemen mana yang harus diprioritaskan di mobile

Checklist mengingat

• Responsive dimulai dari konten, bukan device
• Grid sederhana sering lebih kuat dari layout rumit
• Jangan kejar pixel-perfect lintas semua layar

Mini proyek

Buat halaman katalog 6 produk dengan layout:

• mobile: 1 kolom
• tablet: 2 kolom
• desktop: 3 kolom

Tambahkan CTA tetap terlihat di semua ukuran.

Progress belajar

Progress belajar topik CSS: 40%