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

Tata Letak Kotak CSS Holy Grail — Kode Siap Pakai

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

Ketikkan nama ke dalam sel mana saja di bawah; sel dengan nama yang sama bergabung menjadi satu wilayah area templat kisi.

Memproses... 0%

Hasil

Halaman ini membuka generator grid yang dimuat sebelumnya dengan tata letak cawan suci: tiga kolom dan tiga baris, dengan header dan footer membentang lebar penuh dan baris nav/main/side di antaranya. Baris header menggunakan tinggi otomatis, baris tengah mengisi ruang yang tersisa, dan dua kolom samping ditetapkan pada 200 piksel sedangkan kolom utama mengambil sisanya.

Tata letak cawan suci mendapatkan namanya karena sangat sulit untuk dibuat dengan andal sebelum CSS Grid — peretasan float selama bertahun-tahun, tata letak tabel, dan pemosisian absolut mencoba memalsukan bentuk persis ini. Dengan area templat kisi, ia dipecah menjadi lima wilayah bernama dan beberapa ukuran trek, itulah sebabnya ia tetap menjadi contoh standar pertama untuk mengajarkan CSS Grid.

Setiap nomor dan celah di halaman ini masih aktif: kecilkan kolom samping, tambahkan baris keempat, atau ganti nama area dan pratinjau serta pembaruan CSS yang dapat disalin segera. Salin blok CSS dan HTML langsung ke proyek Anda — semuanya berjalan secara lokal di browser Anda, tidak ada yang diunggah.

🛡️
Dieksekusi di Browser

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

Format & Aturan yang Diterima

  • Input angka untuk 1–6 kolom dan baris, ditambah kontrol celah kolom dan celah baris terpisah yang digabungkan menjadi satu nilai celah jika cocok.
  • Mode area bernama: ketikkan nama area langsung ke sel mana pun di jaringan aktif; alat ini membuat string area templat kisi yang valid dan memperingatkan ketika nama tidak membentuk persegi panjang yang bersih.
  • Blok CSS yang dapat disalin (tampilan: grid, grid-template-columns/rows, gap, grid-template-areas) ditambah kerangka HTML yang cocok dengan satu div area grid per wilayah yang disebutkan.

Manfaat Utama

✓ Ketik nama langsung ke sel mana pun dan nama yang cocok digabungkan menjadi satu wilayah area templat kisi — tanpa perlu menyeret, tidak perlu menebak sintaks string yang dikutip dengan tangan.
✓ Kisi pratinjau langsung mengubah ukuran dan mewarnai ulang pada setiap perubahan, sehingga Anda melihat trek kolom dan baris yang tepat serta setiap wilayah yang disebutkan sebelum menyalin satu baris CSS.
✓ Preset seperti tata letak cawan suci klasik dan sidebar sempit memberi Anda deklarasi area template grid yang nyata dan berfungsi sebagai permulaan, bukan grid kosong.

Kasus Penggunaan

  • • Bangun cangkang halaman cawan suci klasik — header dan footer lebar penuh dengan baris tengah navigasi/utama/samping — dengan mengetikkan nama area alih-alih area templat kisi tulisan tangan.
  • • Letakkan halaman pengaturan atau dasbor admin dengan sidebar dengan lebar tetap di sebelah kolom konten fleksibel dan salin CSS dan HTML yang tepat setelah pratinjau langsung terlihat benar.
  • • Periksa apakah kumpulan area bernama benar-benar membentuk persegi panjang yang valid sebelum dikirim — alat ini menandai nama persis yang akan memecah area templat kisi di browser.