Generator CSS Grid
Apa itu CSS Grid?
CSS Grid Layout adalah sistem layout paling kuat di CSS. Ini adalah sistem dua dimensi yang dapat menangani kolom dan baris, tidak seperti flexbox yang terutama satu dimensi.
Cara menggunakan Generator CSS Grid ini
Atur dimensi grid
Gunakan kontrol sidebar untuk mendefinisikan kolom, baris, dan jarak.
Definisikan area grid
Klik dan seret pada pratinjau untuk memilih area persegi panjang.
Kustomisasi unit
Sesuaikan ukuran kolom dan baris menggunakan field input.
Coba template
Pilih dari layout siap pakai seperti Holy Grail, Blog, atau Dashboard.
Buat kode
Klik "Buat Kode" untuk mengekspor CSS dan HTML siap pakai.
Panduan Sintaks CSS Grid
Inti dari CSS Grid melibatkan properti seperti grid-template-columns (untuk menentukan lebar kolom), grid-template-rows (untuk menentukan tinggi baris), dan grid-gap (untuk mengatur jarak). Menggunakan unit pecahan (fr) memungkinkan tata letak fleksibel yang beradaptasi dengan ukuran viewport.
Contoh Tata Letak CSS Grid
Contoh umum termasuk tata letak 'Holy Grail' (header, sidebar, main, footer) dan tata letak 'Main/Sidebar'. Dengan grid-template-areas, Anda dapat mendefinisikan wilayah ini menggunakan nama yang intuitif, membuat kode Anda jauh lebih bersih dan lebih mudah dipelihara.