Pembuat Layout CSS Grid
Rancang layout CSS Grid dengan editor visual. Atur kolom dan baris menggunakan satuan fr, px, atau auto, konfigurasi jarak, rentangkan sel, dan ekspor CSS yang bersih.
셀을 클릭하여 선택한 후 아래에서 span을 설정하세요.
Apa Itu Pembuat CSS Grid?
Pembuat CSS Grid adalah alat visual untuk merancang layout dua dimensi menggunakan CSS Grid. Anda mendefinisikan kolom, baris, dan jarak, kemudian klik sel untuk mengatur nilai rentang. Alat ini menghasilkan kode CSS yang sesuai yang dapat Anda salin ke dalam proyek Anda. Ini menghilangkan kebutuhan untuk menghafal sintaks Grid saat mempelajari atau membuat prototipe layout.
Cara Membuat Layout CSS Grid
- Definisikan kolom — Masukkan definisi kolom menggunakan fr, px, atau auto (misalnya,
1fr 1fr 1fr) - Definisikan baris — Masukkan definisi baris dengan cara yang sama
- Atur jarak — Sesuaikan nilai jarak kolom dan baris dalam piksel
- Klik Terapkan — Grid pratinjau diperbarui untuk menampilkan layout Anda
- Rentangkan sel — Klik sel mana saja dan atur nilai rentang kolom/baris
- Salin CSS — Klik tombol salin untuk mendapatkan kode yang dihasilkan
Mengapa Menggunakan Pembuat CSS Grid Ini?
- Umpan Balik Visual — Lihat layout grid Anda diperbarui secara waktu nyata
- Satuan Fleksibel — Gunakan fr, px, auto, atau panjang CSS valid lainnya untuk kolom dan baris
- Rentang Sel — Klik sel untuk merentang beberapa kolom atau baris
- CSS Bersih — Kode yang dihasilkan menggunakan properti Grid standar yang siap untuk produksi
- Tidak Perlu Akun — Gratis dan berfungsi sepenuhnya di browser Anda
FreeToolbox vs Generator Grid Lainnya
| Fitur | FreeToolbox | Generator CSS Grid | Layoutit |
|---|---|---|---|
| Rentang sel | Ya | Ya | Ya |
| Satuan khusus | fr, px, auto | fr, px | fr, px, % |
| Pratinjau langsung | Ya | Ya | Ya |
| Iklan | Minimal | Tidak Ada | Sedang |
| Tema gelap | Ya | Tidak | Tidak |
Pertanyaan umum
Satuan apa yang bisa saya gunakan untuk kolom dan baris?
Anda dapat menggunakan nilai track grid CSS yang valid: fr (satuan fraksional), px (piksel), auto, persentase, minmax(), dll. Contohnya: 1fr 200px auto.
Bagaimana cara membuat sel merentang beberapa kolom?
Klik sel di pratinjau untuk memilihnya, lalu atur nilai Rentang Kolom di panel di bawah. Klik 'Atur Rentang' untuk menerapkan.
Bisakah saya membuat area grid bernama?
Alat ini berfokus pada definisi Grid berbasis track dengan sintaks rentang. Untuk area grid-template-areas bernama, Anda perlu menambahkannya secara manual ke CSS yang dihasilkan.
Apa yang terjadi ketika rentang tumpang tindih?
Algoritma penempatan otomatis grid browser menangani rentang yang tumpang tindih. Beberapa sel mungkin bergeser posisinya. Atur ulang rentang jika tata letak terlihat tidak terduga.
Apakah alat ini gratis?
Ya, sepenuhnya gratis tanpa batasan atau pendaftaran yang diperlukan.