CSS Grid Generator

Selamat datang di CSS Grid Generator — pembangun visual interaktif gratis yang mengubah klik menjadi kode CSS Grid yang bersih dan siap salin. Baik Anda sedang membuat wireframe tata letak Holy Grail, memprotoptipe galeri foto, atau mempelajari cara kerja grid-template-columns dan grid-area, alat ini memberi Anda pratinjau langsung, kontrol ukuran per track, dan ekspor satu klik — tanpa pengaturan, tanpa pendaftaran, tanpa backend.

Apa itu CSS Grid Generator?

Alat ini adalah taman bermain tata letak dua dimensi. Anda menentukan baris dan kolom, klik sel untuk menempatkan item, tarik rentang di beberapa track, dan lihat kode CSS yang dihasilkan diperbarui secara real time. Berbeda dengan kebanyakan generator grid yang hanya menghasilkan grid-template-columns, alat ini mendukung penempatan per item (grid-row / grid-column), rentang multi-sel, penomoran garis kisi beranimasi untuk pemula, dan enam preset yang telah teruji yang dapat Anda muat secara instan.

Apa yang membuat generator ini berbeda

Apa arti unit fr dalam CSS Grid?

Unit fr berarti sebagian (fraction) dari ruang bebas yang tersedia dalam kontainer grid. Setelah ukuran tetap (px, em, %) dikurangi, ruang yang tersisa dibagi secara proporsional di antara track fr. Misalnya, 1fr 2fr 1fr memberikan kolom tengah ruang bebas dua kali lebih banyak daripada yang lain. fr adalah cara paling umum untuk membangun tata letak yang fleksibel dan proporsional yang merespons ukuran kontainer tanpa media queries.

Bagaimana perbedaan CSS Grid dari Flexbox?

Flexbox bersifat satu dimensi dan mengatur item di sepanjang satu sumbu (baris atau kolom). CSS Grid bersifat dua dimensi dan mengontrol baris dan kolom pada saat yang bersamaan. Gunakan Flexbox untuk navbar, grup tombol, atau baris kartu tunggal. Gunakan Grid untuk tata letak halaman penuh, galeri foto, dashboard, dan desain apa pun di mana Anda memerlukan penyelarasan yang presisi di kedua sumbu. Banyak UI modern menggabungkan keduanya — Grid untuk kerangka halaman, Flexbox di dalam sel individu.

Bagaimana cara membuat item grid merentang di beberapa sel?

Gunakan grid-column dan grid-row dengan kata kunci span atau nomor garis eksplisit. Misalnya, grid-column: span 2 membuat item selebar dua kolom, sementara grid-column: 1 / 4 membuatnya merentang dari garis 1 ke garis 4. grid-row: 2 / span 3 dimulai pada garis baris 2 dan merentang tiga baris. Dalam generator ini, klik item apa pun untuk memilihnya, lalu gunakan tombol panah di panel samping untuk memperbesar atau memperkecil rentang baris dan kolomnya — CSS akan diperbarui secara instan.

Apa itu minmax() dalam CSS Grid?

minmax(min, max) mendefinisikan ukuran track dengan batas bawah dan atas. Ini paling sering dipasangkan dengan auto-fit atau auto-fill dalam repeat() untuk membangun grid responsif tanpa media queries. Misalnya, repeat(auto-fit, minmax(200px, 1fr)) membuat kolom minimum 200px sebanyak yang muat dalam kontainer, dan meregangkannya untuk berbagi sisa ruang secara merata — pola kanonik untuk tata letak kartu responsif.

Cara Menggunakan Alat Ini

1. Pilih preset awal — klik salah satu dari enam preset tata letak di bagian atas untuk memuat titik awal dunia nyata, atau bangun dari awal.
2. Atur baris dan kolom — gunakan penghitung baris dan kolom untuk menambah atau menghapus track, dan edit setiap ukuran track dengan fr, px, %, auto, atau minmax().
3. Tempatkan dan rentangkan item — klik sel kosong mana pun untuk menambahkan item, atau klik item yang ada untuk memilihnya dan gunakan tombol panah untuk mengubah rentang baris/kolomnya.
4. Sesuaikan celah dan penyelarasan — atur celah baris dan celah kolom dengan slider, dan pilih justify-items serta align-items dari menu dropdown.
5. Aktifkan overlay garis — aktifkan nomor garis kisi untuk melihat dengan tepat di mana garis 1, 2, 3 berada — sangat bagus untuk mempelajari penempatan.
6. Salin atau unduh — beralihlah antara tab CSS dan HTML, lalu klik Salin atau Unduh untuk mengambil kode yang dihasilkan.

Enam Preset Bawaan

Kasus Penggunaan Praktis

Untuk Pengembang Frontend

• Memprotoptipe kerangka halaman dengan cepat sebelum menulis kode komponen
• Menghasilkan cuplikan repeat(auto-fit, minmax()) untuk grid kartu responsif
• Menguji grid-template-areas secara visual sebelum berkomitmen pada suatu struktur
• Mengekspor CSS kontainer dan struktur HTML yang sesuai secara bersamaan

Untuk Desainer dan Pelajar

• Melihat dengan tepat bagaimana perilaku fr, auto, dan minmax() dengan pratinjau langsung
• Mengaktifkan nomor garis kisi untuk memahami penempatan berbasis garis
• Bereksperimen dengan nilai rentang tanpa menulis kode apa pun
• Membandingkan preset secara berdampingan untuk mempelajari pola Grid yang idiomatis

Untuk Pendidik dan Blogger

• Mendemonstrasikan konsep Grid dalam lokakarya dengan overlay visual
• Menghasilkan contoh kode bersih untuk tutorial dalam hitungan detik
• Menunjukkan bagaimana struktur CSS Grid yang sama berskala dari 4 ke 12 kolom

Tips untuk CSS Grid yang Lebih Bersih

• Lebih suka fr daripada % — fr menghormati celah (gap), sedangkan % tidak, sehingga grid berbasis % sering meluap (overflow).
• Gunakan grid-template-areas untuk wilayah bernama — jauh lebih mudah dibaca daripada nomor garis, dan mendokumentasikan dirinya sendiri.
• Gunakan minmax() dengan auto-fit untuk grid responsif tanpa media queries.
• Atur celah eksplisit dengan gap: 1rem alih-alih margin pada item — celah tidak pernah runtuh (collapse) dan tidak butuh pembersihan.
• Gabungkan Grid dan Flexbox — Grid untuk kerangka halaman, Flexbox di dalam sel. Jangan paksa satu alat melakukan kedua pekerjaan tersebut.

Pertanyaan yang Sering Diajukan

Apakah generator ini mendukung grid-template-areas?

Preset Holy Grail menggunakan grid-template-areas dalam CSS yang diekspor. Untuk preset lain, kami menggunakan penempatan berbasis garis (grid-column / grid-row) karena lebih fleksibel saat Anda mengklik dan mengatur ulang item.

Dapatkah saya mengekspor HTML juga?

Ya — beralihlah ke tab HTML di panel ekspor untuk menyalin struktur HTML siap pakai yang cocok dengan CSS yang dihasilkan secara tepat.

Apakah CSS yang dihasilkan akan berfungsi di browser lama?

CSS Grid didukung di semua browser evergreen (Chrome, Edge, Firefox, Safari) dan IE11 dengan implementasi parsial. Untuk browser modern, tidak diperlukan fallback. Jika Anda harus mendukung IE11, pilihlah penempatan berbasis garis (tanpa gap, tanpa minmax(), tanpa repeat(auto-fit)) dan uji secara menyeluruh.

Apakah alat ini disimpan di browser saya?

Semuanya berjalan di sisi klien dalam JavaScript. Tidak ada yang dikirim ke server, sehingga tata letak, nama item, dan konfigurasi Anda tetap pribadi di mesin Anda.

Apakah ini berfungsi di perangkat seluler?

Ya — pembangun akan berubah menjadi satu kolom di ponsel, kontrol tetap dapat diketuk, dan pratinjau tetap interaktif pada layar sentuh.

Sumber Daya Tambahan

• CSS Grid Layout - MDN Web Docs
• Modul Tata Letak CSS Grid Level 2 - Spesifikasi W3C
• CSS Grid Layout - Wikipedia