Apa Itu Pembuat CSS Grid?

Pembuat CSS Grid adalah alat visual yang membantu Anda membuat tata letak CSS Grid tanpa menulis kode dari awal. Alih-alih mengetik properti grid secara manual, Anda merancang tata letak dengan berinteraksi dengan kanvas grid yang intuitif.

Alat ini menyediakan serangkaian kontrol grid lengkap — kolom, baris, celah, penyelarasan, dan area template — semuanya di satu tempat. Saat Anda membuat perubahan, kode CSS dan HTML yang sesuai diperbarui secara real-time, siap untuk disalin ke proyek Anda.

Untuk Siapa Ini?

Pengembang Web

Buat prototipe tata letak grid dengan cepat tanpa menghafal sintaks

Desainer

Terjemahkan ide tata letak menjadi kode CSS siap produksi

Siswa

Pelajari cara kerja properti CSS Grid secara visual

Siapa Saja

Dapatkan kode grid yang bersih dan sesuai standar secara instan

Kemampuan Utama

Generator mencakup fitur CSS Grid yang paling umum digunakan:

Trek Grid

Tentukan kolom dan baris dengan unit CSS apa pun

Unit fleksibel (fr)
Piksel tetap (px)
Pengubahan ukuran otomatis
minmax() lanjutan

Area Template

Lukis wilayah bernama secara visual pada kanvas grid

Antarmuka klik dan seret
Penamaan semantik
Wilayah berkode warna

Kontrol Celah

Atur spasi baris dan kolom secara independen

Spasi sempurna piksel
Celah baris/kolom independen
Pratinjau real-time

Penyelarasan

Konfigurasikan semua properti penyelarasan secara visual

justify-items & align-items
justify-content & align-content
Kontrol tombol visual

Tata Letak Preset

Mulai dengan pola tata letak yang terbukti

Tata letak Holy Grail
Pola sidebar
Grid dashboard
Tata letak galeri

Cara Menggunakan Pembuat CSS Grid

Pilih Titik Awal

Pilih salah satu dari 5 tata letak preset di bagian atas panel kontrol, atau mulai dari grid 3×3 default. Preset secara instan mengonfigurasi kolom, baris, dan area template untuk pola tata letak umum.

Tip pro: Memulai dengan preset menghemat waktu dan memberikan fondasi yang solid untuk penyesuaian.

Konfigurasikan Struktur Grid

Gunakan bagian Grid Setup untuk menyesuaikan tata letak Anda:

Klik + atau − untuk menambah atau menghapus kolom dan baris (1 hingga 12)
Edit nilai trek secara langsung — ketik 1fr, 200px, auto, atau nilai CSS yang valid
Atur celah baris dan celah kolom secara independen menggunakan input celah

Lukis Area Template

Area template memungkinkan Anda memberi nama wilayah grid Anda untuk tata letak semantik:

Pilih area dari daftar area (atau klik + untuk membuat area baru)
Klik atau seret pada sel grid dalam pratinjau untuk menetapkannya ke area tersebut
Klik sel yang dilukis lagi (dengan area yang sama dipilih) untuk menghapusnya

Setiap area mendapat warna unik sehingga Anda dapat dengan mudah melihat tata letak terbentuk.

Sesuaikan Penyelarasan

Sempurnakan cara item diposisikan dalam grid menggunakan bagian Alignment. Empat properti tersedia: justify-items, align-items, justify-content, dan align-content.

Output cerdas: Hanya nilai non-default yang muncul dalam kode yang dihasilkan, menjaga CSS Anda tetap bersih.

Salin Kode

Beralih antara tab CSS dan HTML untuk melihat kode yang dihasilkan. Klik tombol Salin untuk menyalin kode yang saat ini terlihat ke papan klip Anda.

Kode siap produksi dan mengikuti praktik terbaik CSS Grid modern.

Fitur

Kanvas Grid Visual

Pratinjau interaktif menampilkan tata letak grid Anda secara real-time. Setiap sel dapat diklik dan diseret — pilih area dan lukis sel untuk menentukan wilayah grid bernama. Kanvas mencerminkan lebar kolom, tinggi baris, dan pengaturan celah yang tepat.

Desain interaktif: Lihat perubahan Anda secara instan saat Anda membangun tata letak — tidak perlu beralih antara kode dan pratinjau.

Tata Letak Preset

Mulai cepat dengan lima preset tata letak bawaan:

Holy Grail

Tata letak header, sidebar, konten, dan footer klasik dengan sidebar tetap

Sidebar

Tata letak dua kolom dengan sidebar lebar tetap

Dashboard

Panel grid berukuran sama untuk antarmuka admin

Galeri

Grid multi-kolom tanpa area bernama, ideal untuk galeri gambar

Header-Footer

Tata letak satu kolom dengan wilayah header, konten, dan footer

Nilai Trek Fleksibel

Setiap trek kolom dan baris menerima nilai grid CSS yang valid. Gunakan unit fr untuk pengubahan ukuran fleksibel, px untuk lebar tetap, auto untuk pengubahan ukuran berbasis konten, atau nilai lanjutan seperti minmax(200px, 1fr).

Contoh Nilai Trek

/* Flexible units */
grid-template-columns: 1fr 2fr 1fr;

/* Fixed widths */
grid-template-columns: 200px 400px 200px;

/* Mixed values */
grid-template-columns: 250px 1fr auto;

/* Advanced sizing */
grid-template-columns: minmax(200px, 1fr) 2fr minmax(150px, 300px);

Area Template

Buat area grid bernama dengan melukis sel pada kanvas. Tambah, hapus, dan pilih area dari daftar area. Alat menghasilkan CSS grid-template-areas yang tepat dengan pemilih kelas area yang sesuai.

Pengkodean Manual

Metode Tradisional

Tulis sintaks grid-template-areas
Hitung titik untuk sel kosong
Buat kelas area secara manual
Debug masalah penyelarasan

Pelukisan Visual

Pembuat Grid

Klik dan seret untuk melukis area
Lihat tata letak secara real-time
Kelas CSS yang dihasilkan otomatis
Umpan balik visual instan

Kontrol Celah dan Penyelarasan

Atur celah baris dan kolom secara independen dalam piksel. Konfigurasikan keempat properti penyelarasan — justify-items, align-items, justify-content, dan align-content — dengan grup tombol visual.

Output kode bersih: Nilai default secara otomatis dihilangkan dari kode output, menjaga CSS Anda minimal dan mudah dirawat.

Output Kode Bersih

Generator menghasilkan CSS siap pakai dengan kelas .grid-container dan kelas area individual. Beralih ke tab HTML untuk struktur markup yang cocok. Salin salah satu output dengan satu klik.

Sintaks CSS Grid yang sesuai standar
Penamaan kelas semantik
Kode minimal dan dioptimalkan
Siap untuk penggunaan produksi

Mode Gelap

Alat ini sepenuhnya mendukung mode gelap, secara otomatis menyesuaikan semua warna, batas, dan blok output kode untuk penggunaan yang nyaman dalam kondisi pencahayaan apa pun.

Pertanyaan yang Sering Diajukan

Nilai trek apa yang dapat saya gunakan?

Anda dapat menggunakan nilai trek CSS Grid yang valid:

1fr — unit fraksi fleksibel
200px — nilai piksel tetap
auto — pengubahan ukuran berbasis konten
50% — nilai persentase
min-content / max-content — pengubahan ukuran intrinsik
minmax(200px, 1fr) — pengubahan ukuran responsif dengan batasan
repeat(3, 1fr) — pola trek berulang

Bagaimana cara kerja area template?

Area template memungkinkan Anda menetapkan nama ke wilayah grid. Pilih area dari daftar, kemudian klik atau seret pada sel kanvas untuk "melukis" mereka. Alat menghasilkan properti grid-template-areas dan kelas CSS yang sesuai secara otomatis.

Setiap area bernama menjadi wilayah semantik dalam tata letak Anda, membuat HTML Anda lebih mudah dibaca dan CSS Anda lebih mudah dirawat.

Bisakah saya memiliki sel tanpa area?

Ya. Sel yang tidak dilukis muncul sebagai titik (.) dalam nilai grid-template-areas yang dihasilkan, yang merupakan sintaks CSS Grid yang valid untuk sel kosong.

Ini berguna ketika Anda ingin membuat ruang kosong atau membiarkan posisi grid tertentu kosong untuk keseimbangan visual.

Mengapa saya tidak melihat properti penyelarasan dalam output CSS?

Generator hanya menampilkan nilai penyelarasan non-default untuk menjaga CSS Anda tetap bersih dan minimal:

justify-items: stretch dan align-items: stretch adalah default CSS Grid, jadi dihilangkan
justify-content: start dan align-content: start juga default
Ubah ke nilai berbeda dan mereka akan muncul dalam kode

Pendekatan ini mengikuti praktik terbaik CSS dengan menghindari deklarasi yang tidak perlu.

Berapa ukuran grid maksimum?

Anda dapat membuat grid hingga 12 kolom × 12 baris (144 sel). Ini mencakup sebagian besar kebutuhan tata letak dunia nyata.

Sebagian besar tata letak web praktis menggunakan antara 2-6 kolom dan 3-8 baris, jadi batas 12×12 memberikan banyak fleksibilitas untuk desain kompleks.

Apakah alat ini berfungsi di perangkat seluler?

Ya. Tata letak menyesuaikan dengan layar yang lebih kecil, dan kanvas grid mendukung pelukisan sentuh — ketuk dan seret untuk menetapkan area di ponsel dan tablet.

Semua kontrol ramah sentuh dan antarmuka secara otomatis menyesuaikan untuk kegunaan seluler yang optimal.

Apakah data saya disimpan di mana pun?

Tidak. Semuanya berjalan sepenuhnya di browser Anda. Tidak ada konfigurasi grid atau kode yang dihasilkan yang dikirim ke server mana pun.

100% Pribadi Tata letak dan kode Anda tetap sepenuhnya pribadi dan aman di perangkat Anda.