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

Tata Letak Kotak CSS 3 Kolom Sama

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 kumpulan generator kisi menjadi tiga kolom dengan lebar yang sama dalam satu baris, dengan area bernama dimatikan — tata letaknya hanya ulangi(3, 1fr), cara terpendek untuk mengatakan "tiga kolom yang selalu membagi lebar yang tersedia secara merata."

Kolom dengan lebar yang sama adalah tulang punggung kisi-kisi kartu, tabel harga, dan galeri gambar: tidak ada area yang perlu diberi nama karena setiap kolom memainkan peran yang sama, sehingga ukuran jalur biasa lebih jelas daripada deklarasi area templat-kisi. Tambahkan satu baris dan ulangi tiga trek yang sama di bawahnya, masih rata sempurna.

Tingkatkan jumlah kolom untuk grid yang lebih padat, atau aktifkan area bernama jika kolom selanjutnya perlu menonjol dari yang lain — CSS dan HTML di bawah diperbarui saat Anda melakukannya. Semuanya berjalan di sisi klien, jadi tidak ada yang perlu diunggah dan tidak ada yang perlu ditunggu.

🛡️
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.