⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Bar sisi + Susun Letak Grid CSS Kandungan

Reka reka letak Grid CSS secara visual: tetapkan lajur, baris dan jurang, kemudian taip nama kawasan ke dalam sel untuk membina kawasan templat grid — dengan pratonton langsung dan CSS dan HTML yang boleh disalin.

Taipkan nama ke dalam mana-mana sel di bawah; sel dengan nama yang sama bergabung menjadi satu kawasan grid-template-kawasan.

Memproses... 0%

Hasilnya

Halaman ini membuka penjana grid dengan reka letak dua lajur, satu baris yang telah dinamakan: lajur bar sisi 200px bersebelahan lajur kandungan fleksibel yang mengambil ruang yang tinggal. Kedua-dua kawasan boleh dilihat dalam pratonton langsung dengan serta-merta, diwarnakan dan dilabelkan supaya perpecahan jelas sekali imbas.

Ini ialah bentuk navigasi-tambah-kandungan yang paling biasa di web — halaman tetapan, tapak dokumentasi dan papan pemuka pentadbir semuanya bersandar pada rel lebar tetap di sebelah kawasan utama bendalir. Oleh kerana lajur bar sisi menggunakan nilai piksel dan lajur kandungan menggunakan 1fr, bar sisi kekal lebar tetap manakala lajur kandungan menyerap setiap piksel tambahan port pandangan.

Namakan semula sama ada kawasan, tukar lebar lajur atau tambah lebih banyak baris untuk pengepala di atas pemisahan — output CSS dan HTML di bawah menjejaki setiap pengeditan dalam masa nyata. Alat ini percuma dan terus berfungsi sepenuhnya dalam penyemak imbas anda, tanpa muat naik dan tiada akaun.

🛡️
Dilaksanakan dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya di luar talian. 100% Selamat.

Format & Peraturan yang Diterima

  • Input nombor untuk 1–6 lajur dan baris, serta kawalan lajur-jurang dan jurang baris yang berasingan yang digabungkan menjadi satu nilai jurang apabila ia sepadan.
  • Mod kawasan bernama: taipkan nama kawasan terus ke dalam mana-mana sel grid langsung; alat membina rentetan grid-template-kawasan yang sah dan memberi amaran apabila nama tidak membentuk segi empat tepat yang bersih.
  • Blok CSS boleh disalin (paparan: grid, grid-template-lajur/baris, jurang, grid-template-kawasan) serta rangka HTML yang sepadan dengan satu div kawasan grid bagi setiap wilayah yang dinamakan.

Faedah Utama

✓ Taipkan nama terus ke dalam mana-mana sel dan nama yang sepadan bergabung menjadi satu kawasan grid-template-kawasan — tiada pilihan seretan, tiada meneka sintaks rentetan petikan dengan tangan.
✓ Grid pratonton langsung mengubah saiz dan mewarna semula pada setiap perubahan, jadi anda melihat lajur dan baris trek yang tepat dan setiap wilayah yang dinamakan sebelum menyalin satu baris CSS.
✓ Pratetap seperti susun atur holy grail klasik dan bar sisi sempit memberi anda pengisytiharan kawasan templat grid yang berfungsi untuk bermula daripada grid kosong.

Kes Penggunaan

  • • Bina cangkerang halaman holy grail klasik — pengepala dan pengaki lebar penuh dengan baris tengah nav/utama/ketepi — dengan menaip nama kawasan dan bukannya kawasan grid-template-tulisan tangan.
  • • Susun halaman tetapan atau papan pemuka pentadbir dengan bar sisi lebar tetap di sebelah lajur kandungan fleksibel dan salin CSS dan HTML yang tepat setelah pratonton langsung kelihatan betul.
  • • Semak sama ada satu set kawasan yang dinamakan benar-benar membentuk segi empat tepat yang sah sebelum penghantaran — alat ini membenderakan nama tepat yang akan memecahkan grid-template-kawasan dalam penyemak imbas.