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

Penjana Grid CSS

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

Pengisytiharan kawasan templat grid ialah salah satu bahagian CSS yang paling boleh dibaca, tetapi hanya sekali ia wujud — sampai ke sana dengan tangan bermakna mengira rentetan yang dipetik dan memadankan panjang baris, dan satu sel yang tidak padan secara senyap memecahkan keseluruhan reka letak. Penjana ini mengubahnya menjadi manipulasi langsung: tetapkan kiraan lajur dan baris, taipkan nama ke dalam mana-mana sel grid langsung dan nama yang sepadan bergabung ke dalam satu rantau bernama secara automatik.

Di bawah tudung, setiap sel yang anda biarkan kosong menjadi titik dalam rentetan kawasan templat grid yang dijana dan setiap sel yang anda namakan menjadi sebahagian daripada segi empat tepat nama itu. CSS hanya membenarkan kawasan yang dinamakan untuk menduduki satu blok segi empat tepat yang bersih, jadi alat itu menyemaknya semasa anda menaip dan memberitahu anda dengan tepat apabila nama itu belum lagi membentuk segi empat tepat — daripada menghasilkan CSS secara senyap, penyemak imbas akan menolak.

Jurang lajur dan jurang baris lalai kepada 8px dan digabungkan menjadi satu garis jurang apabila ia sepadan, dan grid pratonton langsung sentiasa mencerminkan lajur grid-templat-lajur dan runut baris-templat grid anda, termasuk lajur piksel tetap daripada pratetap seperti rel sisi 200px holy grail. Output yang boleh disalin meliputi kedua-dua belah: blok CSS sedia untuk helaian gaya anda dan rangka HTML yang sepadan dengan satu div kawasan grid bagi setiap wilayah yang dinamakan.

Grid dan flexbox menyelesaikan masalah reka letak yang berbeza, dan css-flexbox-generator di tapak ini ialah titik permulaan yang lebih baik untuk susun atur satu dimensi — satu baris atau lajur item fleksibel seperti bar navigasi atau timbunan kad. Jangkau penjana grid ini sebaliknya apabila anda memerlukan kawalan dua dimensi, baris dan lajur eksplisit atau kawasan yang dinamakan seperti pengepala/nav/utama/pengaki; kedua-dua alatan selalunya berakhir pada halaman yang sama, grid untuk shell halaman dan flexbox di dalam kepingannya. Seperti setiap alat di tapak ini, ia berjalan sepenuhnya dalam penyemak imbas anda — tiada muat naik, 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.