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

Susun Atur Grid Holy Grail CSS — Kod Sedia

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 yang dipramuat dengan susun atur holy grail: tiga lajur dan tiga baris, dengan pengepala dan pengaki menjangkau lebar penuh dan baris nav/utama/sisi di antaranya. Baris pengepala menggunakan ketinggian automatik, baris tengah mengisi ruang yang tinggal dan dua lajur sisi ditetapkan pada 200px manakala lajur utama mengambil masa yang selebihnya.

Reka letak holy grail mendapat namanya kerana ia benar-benar sukar untuk dibina dengan pasti sebelum CSS Grid — bertahun-tahun peretasan terapung, susun atur jadual dan kedudukan mutlak cuba memalsukan bentuk tepat ini. Dengan kawasan templat grid ia runtuh kepada lima kawasan bernama dan segelintir saiz trek, itulah sebabnya ia kekal sebagai contoh pertama standard untuk mengajar Grid CSS.

Setiap nombor dan jurang pada halaman ini masih hidup: kecilkan lajur sisi, tambah baris keempat atau namakan semula kawasan dan pratonton dan kemas kini CSS yang boleh disalin dengan segera. Salin blok CSS dan HTML terus ke dalam projek anda — semuanya berjalan secara setempat dalam penyemak imbas anda, tiada apa-apa yang dimuat naik.

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