⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Generator CSS Grid

Rancang tata letak CSS Grid secara visual: atur kolom, baris, dan jarak, lalu ketik nama area ke dalam sel untuk membangun grid-template-areas — dengan pratinjau langsung serta CSS dan HTML yang dapat disalin.

🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.

Ketik nama ke sel mana pun di bawah; sel dengan nama yang sama digabung menjadi satu region grid-template-areas.

Memproses... 0%

Hasil

Deklarasi grid-template-areas adalah salah satu bagian CSS yang paling mudah dibaca, tetapi hanya setelah ia ada — membuatnya secara manual berarti menghitung string kutipan dan mencocokkan panjang baris, dan satu sel yang tidak cocok secara diam-diam merusak seluruh tata letak. Generator ini mengubahnya menjadi manipulasi langsung: atur jumlah kolom dan baris, ketik nama ke sel mana pun di grid langsung, dan nama yang cocok akan otomatis melebur menjadi satu area bernama.

Di balik layar, setiap sel yang Anda biarkan kosong menjadi titik dalam string grid-template-areas yang dihasilkan, dan setiap sel yang Anda beri nama menjadi bagian dari persegi panjang nama tersebut. CSS hanya mengizinkan area bernama menempati satu blok persegi panjang bersih, jadi alat ini memeriksanya saat Anda mengetik dan memberi tahu Anda dengan tepat ketika sebuah nama belum membentuk persegi panjang yang valid — alih-alih diam-diam menghasilkan CSS yang akan ditolak browser.

jarak-kolom dan jarak-baris bawaan adalah 8px dan digabung menjadi satu baris gap jika nilainya cocok, dan pratinjau grid langsung selalu mencerminkan jejak grid-template-columns dan grid-template-rows Anda, termasuk kolom piksel tetap dari preset seperti rel samping 200px holy grail. Keluaran yang dapat disalin mencakup kedua sisi: blok CSS siap untuk stylesheet Anda dan kerangka HTML yang cocok dengan satu div grid-area per area bernama.

Grid dan flexbox memecahkan masalah tata letak yang berbeda, dan css-flexbox-generator di situs ini adalah titik awal yang lebih baik untuk tata letak satu dimensi — satu baris atau kolom item fleksibel seperti bilah navigasi atau tumpukan kartu. Gunakan generator grid ini sebagai gantinya ketika Anda membutuhkan kontrol dua dimensi, baris dan kolom eksplisit, atau area bernama seperti header/nav/main/footer; kedua alat ini sering berakhir di halaman yang sama, grid untuk kerangka halaman dan flexbox di dalam bagian-bagiannya. Seperti setiap alat di situs ini, ia berjalan sepenuhnya di browser Anda — tanpa unggahan, tanpa akun.

Menikmati alat ini? Merasa produk ini bermanfaat? Melihat potensi di dalamnya dan ingin mendukungnya?

🛡️
Dijalankan di Browser

File dan masukan Anda tidak pernah meninggalkan perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Input angka untuk 1–6 kolom dan baris, ditambah kontrol jarak-kolom dan jarak-baris terpisah yang digabung menjadi satu nilai gap jika nilainya sama.
  • Mode area bernama: ketik nama area langsung di sel mana saja pada grid langsung; alat ini membangun string grid-template-areas yang valid dan memperingatkan jika nama tidak membentuk persegi panjang bersih.
  • Blok CSS yang dapat disalin (display: grid, grid-template-columns/rows, gap, grid-template-areas) plus kerangka HTML yang cocok dengan satu div grid-area per area bernama.

Manfaat Utama

✓ Ketik nama langsung di sel mana saja dan nama yang cocok akan melebur menjadi satu area grid-template-areas — tanpa seret-pilih, tanpa menebak sintaks string kutipan secara manual.
✓ Pratinjau grid langsung berubah ukuran dan warna pada setiap perubahan, sehingga Anda melihat jejak kolom dan baris yang persis serta setiap area bernama sebelum menyalin satu baris pun kode CSS.
✓ Preset seperti tata letak holy grail klasik dan bilah sisi sempit memberi Anda deklarasi grid-template-areas yang nyata dan berfungsi sebagai titik awal, bukan grid kosong.

Kasus Penggunaan

  • • Bangun tata letak holy grail klasik — header dan footer lebar penuh dengan baris tengah nav/konten/samping — cukup dengan mengetik nama area, tanpa perlu menulis grid-template-areas secara manual.
  • • Susun halaman pengaturan atau dasbor admin dengan sidebar lebar tetap di samping kolom konten fleksibel, lalu salin CSS dan HTML persisnya begitu pratinjau langsung terlihat sesuai.
  • • Periksa apakah sekumpulan area bernama benar-benar membentuk persegi panjang yang valid sebelum digunakan — alat ini akan menandai nama spesifik yang akan merusak grid-template-areas di browser.