Latihan 1: Grids & Containers — UI/UX

Latihan 1 dari materi Grids & Containers di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya <div class="container"> berisi <div class="grid"> dengan tiga kartu kamar Homestay Kabut (<div class="card">), dan tag <style> yang masih kosong. Strukturnya biarkan seperti itu. Tulis dua aturan CSS di dalam <style>:

  1. .container: max-width: 1200px dan margin: 0 auto, supaya container-nya di tengah layar lebar. Tambahkan juga padding: 0 1.5rem supaya isinya gak nempel ke tepi layar HP (padding ini gak dicek).
  2. .grid: display: grid, grid-template-columns: repeat(3, 1fr), dan gap: 1.5rem.

margin: 0 auto dicek dari CSS-mu, karena di pratinjau yang lebih sempit dari 1200px margin auto memang bernilai 0. Tiga kolom sama lebar ini hasilnya sama dengan tiga kartu span 4 di grid 12 kolom.

Hint