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>:
.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).
.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
Container membatasi lebar isi dengan max-width dan menaruhnya di tengah dengan margin kiri kanan auto. Grid membagi isinya jadi kolom yang sama lebar, dengan gutter di antaranya.
Tulis dua aturan: .container { ... } dengan max-width, margin, dan padding, lalu .grid { ... } dengan display, grid-template-columns, dan gap.