Kartu login yang terlihat pas di laptop bisa menempel ke tepi layar saat dibuka di ponsel. Tutorial pemula ini membahas cara menempatkan satu kartu di tengah halaman dengan CSS Grid, sekaligus menjaga lebar kartu tetap nyaman dibaca. Siapkan halaman HTML sederhana yang memiliki satu elemen pembungkus dan satu kartu di dalamnya.
Buat pembungkus dan kartu
Gunakan struktur seperti <main class="page"><section class="card">Konten form</section></main>. Elemen page akan memenuhi tinggi layar dan menjadi area untuk menyelaraskan kartu, sementara card menampung isinya. Kalau konten form sudah ada, cukup tambahkan class tersebut pada elemen yang sesuai.
Hapus margin bawaan body dengan aturan body { margin: 0; }. Tanpa aturan ini, jarak tepi bawaan browser bisa membuat halaman tampak tidak benar-benar rata dengan layar. Pastikan file CSS yang diedit memang terhubung ke halaman sebelum melanjutkan.
Pusatkan dengan CSS Grid
Tambahkan aturan .page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }. display: grid membuat pembungkus menggunakan tata letak Grid, sedangkan place-items: center menyelaraskan kartu di tengah secara horizontal dan vertikal. min-height menjaga area setidaknya setinggi layar, tetapi tetap membolehkan halaman memanjang jika isinya lebih tinggi.
Untuk lebar yang lebih terkendali, gunakan .card { width: min(100%, 420px); box-sizing: border-box; padding: 24px; }. Kartu akan mengikuti lebar ruang yang tersedia, tetapi tidak melewati 420 piksel, dan padding tidak membuat lebarnya meluap karena box-sizing. Angka 420px adalah pilihan tata letak yang bisa disesuaikan dengan isi form.
Cek tampilan di layar kecil
Buka halaman di browser lalu gunakan mode perangkat untuk mengecilkan lebar layar. Kartu seharusnya tetap berada di tengah dengan jarak dari tepi yang berasal dari padding pembungkus. Jika kartu terlalu lebar, periksa apakah aturan width dan box-sizing sudah diterapkan pada class card yang benar.