LAB FRONTEND · TANPA PENDAFTARAN

Playground CSS Grid Responsif

Ubah ukuran kartu dan jarak grid, bandingkan auto-fit dengan auto-fill, lalu unduh contoh HTML yang dapat dibuka sendiri.

Semua alat · Redaksi NgodingSantai · Diperbarui 26 September 2026

Pengaturan layout

Pengulangan kolomLebar minimum kartu 180pxJarak kartu 16pxJumlah kartu

Pratinjau langsung

Kartu contoh

CSS yang dihasilkan

Aktifkan JavaScript untuk membuat CSS.

Percobaan: dua kartu pada layar lebar

Pilih dua kartu dan lebar minimum 100px. Pada layar lebar, auto-fill mempertahankan ruang kolom kosong; auto-fit meruntuhkan kolom kosong sehingga dua kartu dapat melebar. Bila pratinjau hanya cukup untuk dua kolom, keduanya dapat terlihat sama. Perbesar jendela untuk melihat perbedaannya.

Mengapa min(100%, …) digunakan?

Minimum tetap 360px bisa lebih besar daripada ruang isi ponsel 320px. Batas min(100%, 360px) memungkinkan kartu mengikuti lebar kontainer. Ini tidak memperbaiki semua overflow: gambar tanpa batas ukuran, URL panjang, atau anak grid dengan ukuran minimum masih perlu diperiksa.

Unduhan memuat HTML dan CSS tanpa library atau CDN. Buka file, ubah teks kartu dengan konten proyek Anda, lalu uji lebar sempit. Pratinjau di halaman ini memakai lebar panel, bukan meniru perangkat tertentu.

Baca panduan CSS Grid dan diagnosis horizontal scroll. Referensi: MDN repeat().