Apa itu CSS Grid?
CSS Grid Layout adalah sistem tata letak dua dimensi yang sudah ada di browser modern. Anda mendefinisikan wadah grid dengan display: grid, lalu mengendalikan kolom dengan grid-template-columns dan baris dengan grid-template-rows. Unit pecahan (fr) mendistribusikan ruang yang tersedia secara proporsional. Item anak dapat mencakup beberapa kolom atau baris menggunakan grid-column: span N dan grid-row: span N.
Cara Menggunakan Generator CSS Grid
-
Atur jumlah kolom dan baris menggunakan input angka (1–12 masing-masing).
-
Sesuaikan grid-template-columns dan grid-template-rows untuk mengontrol ukuran (mis. 1fr 2fr, 200px auto).
-
Atur jarak antar sel (mis. 10px, 1rem).
-
Klik sel mana saja di pratinjau untuk memilihnya (berubah menjadi oranye).
-
Atur col-span dan row-span di panel Rentang Sel, lalu klik Terapkan. Sel yang membentang menjadi hijau.
-
Klik tab CSS atau HTML untuk mengubah format keluaran, lalu Salin ke clipboard.
-
Klik Atur Ulang Semua untuk memulai dengan grid 3×3 baru.