Penjana CSS Grid
Reka bentuk reka letak CSS Grid secara visual: tetapkan lajur, baris dan jurang, kemudian taip nama kawasan ke dalam sel untuk membina grid-template-areas — dengan pratonton langsung serta CSS dan HTML yang boleh disalin.
🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.
Keputusan
Pengisytiharan grid-template-areas adalah salah satu cebisan CSS yang paling boleh dibaca, tetapi hanya setelah ia wujud — menghasilkannya secara manual bermakna mengira rentetan berpetik dan memadankan panjang baris, dan satu sel yang tidak sepadan akan memecahkan keseluruhan reka letak secara senyap. Penjana ini mengubahnya kepada manipulasi terus: tetapkan kiraan lajur dan baris, taip nama ke dalam mana-mana sel grid langsung, dan nama yang sepadan akan bergabung menjadi satu rantau bernama secara automatik.
Di sebalik tabir, setiap sel yang anda biarkan kosong menjadi satu titik dalam rentetan grid-template-areas yang dijana, dan setiap sel yang anda namakan menjadi sebahagian daripada segi empat tepat nama itu. CSS hanya membenarkan rantau bernama untuk menduduki satu blok segi empat tepat yang bersih, jadi alat ini menyemaknya semasa anda menaip dan memberitahu anda dengan tepat apabila sesuatu nama belum membentuk segi empat tepat yang sah — bukannya menghasilkan CSS secara senyap yang akan ditolak oleh pelayar.
Jurang-lajur dan jurang-baris ditetapkan secara lalai kepada 8px dan bergabung menjadi satu baris jurang apabila kedua-duanya sepadan, dan grid pratonton langsung sentiasa mencerminkan trek grid-template-columns dan grid-template-rows anda, termasuk lajur piksel tetap daripada praset seperti rel sisi 200px holy grail. Output yang boleh disalin meliputi kedua-dua belah: blok CSS yang sedia untuk lembaran gaya anda dan rangka HTML sepadan dengan satu div grid-area bagi setiap rantau bernama.
Grid dan flexbox menyelesaikan masalah reka letak yang berbeza, dan penjana-css-flexbox di laman ini adalah titik permulaan yang lebih baik untuk reka letak satu dimensi — satu baris atau lajur item fleksibel seperti bar navigasi atau timbunan kad. Gunakan penjana grid ini sebaliknya apabila anda memerlukan kawalan dua dimensi, baris dan lajur eksplisit, atau rantau bernama seperti pengatas/nav/utama/pengaki; kedua-dua alat ini selalunya berakhir pada halaman yang sama, grid untuk kerangka halaman dan flexbox di dalam bahagian-bahagiannya. Seperti setiap alat di laman ini, ia berjalan sepenuhnya dalam pelayar anda — tiada muat naik, tiada akaun.