Pembina Layout Grid CSS
Reka bentuk layout Grid CSS dengan editor visual. Tetapkan lajur dan baris menggunakan unit fr, px atau auto, konfigurasikan jurang, rentangkan sel dan eksport CSS yang bersih.
셀을 클릭하여 선택한 후 아래에서 span을 설정하세요.
Apakah Itu Pembina Grid CSS?
Pembina Grid CSS ialah alat visual untuk mereka bentuk layout dua dimensi menggunakan Grid CSS. Anda menentukan lajur, baris dan jurang, kemudian klik sel untuk menetapkan nilai rentang. Alat ini menjana kod CSS yang sepadan yang boleh anda salin ke dalam projek anda. Ia menghapuskan keperluan untuk menghafal sintaks Grid semasa belajar atau membuat prototaip layout.
Cara Membina Layout Grid CSS
- Tentukan lajur — Masukkan definisi lajur menggunakan fr, px atau auto (contohnya,
1fr 1fr 1fr) - Tentukan baris — Masukkan definisi baris dengan cara yang sama
- Tetapkan jurang — Laraskan nilai jurang lajur dan baris dalam piksel
- Klik Guna — Grid pratonton dikemas kini untuk menunjukkan layout anda
- Rentangkan sel — Klik mana-mana sel dan tetapkan nilai rentang lajur/baris
- Salin CSS — Klik butang salin untuk mendapatkan kod yang dijana
Mengapa Menggunakan Pembina Grid CSS Ini?
- Maklum Balas Visual — Lihat layout grid anda dikemas kini dalam masa nyata
- Unit Fleksibel — Gunakan fr, px, auto atau sebarang panjang CSS yang sah untuk lajur dan baris
- Perentangan Sel — Klik sel untuk merentang merentasi berbilang lajur atau baris
- CSS Bersih — Kod yang dijana menggunakan sifat Grid standard yang sedia untuk pengeluaran
- Tidak Perlu Akaun — Percuma dan berfungsi sepenuhnya dalam pelayar anda
FreeToolbox vs Penjana Grid Lain
| Ciri | FreeToolbox | Penjana Grid CSS | Layoutit |
|---|---|---|---|
| Perentangan sel | Ya | Ya | Ya |
| Unit tersuai | fr, px, auto | fr, px | fr, px, % |
| Pratonton langsung | Ya | Ya | Ya |
| Iklan | Minimum | Tiada | Sederhana |
| Tema gelap | Ya | Tidak | Tidak |
Soalan lazim
Unit apa yang boleh saya gunakan untuk lajur dan baris?
Anda boleh menggunakan sebarang nilai trek grid CSS yang sah: fr (unit pecahan), px (piksel), auto, peratusan, minmax(), dsb. Contohnya: 1fr 200px auto.
Bagaimana saya membuat sel merentang berbilang lajur?
Klik sel dalam pratonton untuk memilihnya, kemudian tetapkan nilai Rentang Lajur dalam panel di bawah. Klik 'Tetapkan Rentang' untuk menggunakan.
Bolehkah saya mencipta kawasan grid bernama?
Alat ini memfokuskan pada definisi Grid berasaskan trek dengan sintaks rentang. Untuk grid-template-areas bernama, anda perlu menambahkannya secara manual pada CSS yang dijana.
Apa yang berlaku apabila rentang bertindih?
Algoritma peletakan automatik grid pelayar mengendalikan rentang bertindih. Sesetengah sel mungkin beralih kedudukan. Tetapkan semula rentang jika layout kelihatan tidak dijangka.
Adakah alat ini percuma?
Ya, percuma sepenuhnya tanpa had atau pendaftaran diperlukan.