online
ToolHQ CSS Grid Generator — online
Buat kode CSS Grid layout secara visual.
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use ToolHQ CSS Grid Generator
1
Langkah 1: Pilih Tata Letak Grid Anda
Pilih jumlah baris dan kolom untuk tata letak grid Anda. Anda dapat memilih dari berbagai template yang telah dirancang sebelumnya atau membuat tata letak kustom dari awal.
2
Langkah 2: Tambahkan Grid Items
Seret dan lepaskan item grid ke layout Anda untuk membuat desain yang menarik secara visual. Anda dapat menyesuaikan ukuran, warna, dan posisi setiap item sesuai kebutuhan.
3
Langkah 4: Generate Kode CSS
Setelah Anda mendesain grid layout Anda, klik tombol 'Generate CSS' untuk menerima custom CSS code yang dapat Anda copy dan paste ke dalam file HTML Anda.