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

3 Lajur Sama Susun Atur 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

Halaman ini membuka set penjana grid kepada tiga lajur yang sama lebar dalam satu baris, dengan kawasan yang dinamakan dimatikan — reka letak hanya berulang(3, 1fr), cara terpendek untuk menyebut "tiga lajur yang sentiasa membahagikan lebar yang tersedia secara sama rata."

Lajur yang sama lebar ialah tenaga kerja grid kad, jadual harga dan galeri imej: tiada kawasan yang memerlukan penamaan kerana setiap lajur memainkan peranan yang sama, jadi saiz trek biasa adalah lebih jelas daripada pengisytiharan kawasan templat grid. Tambahkan baris dan tiga trek yang sama berulang di bawahnya, masih sama rata.

Naikkan kiraan lajur untuk grid yang lebih padat, atau hidupkan kawasan yang dinamakan jika lajur kemudian perlu menonjol daripada yang lain — CSS dan HTML di bawah dikemas kini sebaik sahaja anda melakukannya. Segala-galanya berjalan di sebelah pelanggan, jadi tiada apa-apa untuk dimuat naik dan apa-apa untuk menunggu.

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