Penjana CSS Grid
Taman permainan visual untuk mencipta susun atur CSS Grid dengan pratonton langsung
Sifat Bekas Grid
Sifat Item Grid
Praset Susun Atur
Pratonton Langsung
CSS Dijana
Contoh Penggunaan
Susun Atur 2 Lajur
Cipta susun atur dua lajur mudah untuk kandungan dan bar sisi.
Grid Papan Pemuka
Bina susun atur papan pemuka dengan widget pelbagai saiz.
Galeri Imej
Cipta grid galeri imej responsif dengan sel saiz sama.
Ciri-ciri
Pratonton Visual Langsung
Lihat susun atur grid dikemas kini secara masa nyata
Kod CSS Sedia Guna
Dapatkan kod CSS bersih untuk bekas grid dan item
Praset Susun Atur
Mula pantas dengan praset grid biasa
Rentangan Item Grid
Konfigurasikan item untuk merentangi pelbagai lajur atau baris
Cara Menggunakan?
Tetapkan Sifat Grid
Pilih bilangan lajur dan baris, saiz, gap dan penjajaran.
Konfigurasikan Item
Tambah item dan konfigurasikan grid-column dan grid-row.
Salin CSS
Salin kod CSS yang dijana dan gunakan dalam projek anda.
Soalan Lazim
Apakah Penjana CSS Grid?
Penjana CSS Grid ialah taman permainan visual di mana anda menyediakan lajur, baris, jarak dan rentangan item, kemudian melihat susun atur dikemas kini secara langsung. Apabila nampak sempurna, salin CSS bersih dan letakkan dalam projek anda. Tanpa menghafal sintaks.
Ciri-ciri utama
Konfigurasikan bilangan lajur dan baris dengan saiz fleksibel (fr, px, auto). Laraskan gap, justify-items dan align-items pada peringkat bekas. Pilih item individu untuk menetapkan nilai grid-column/grid-row bagi rentangan. Enam praset susun atur untuk permulaan pantas.
Kes penggunaan biasa
Susun atur halaman dengan pengepala, bar sisi, kandungan utama dan pengaki. Susun atur papan pemuka dengan kad widget pelbagai saiz. Galeri foto dengan sel seragam. Susun atur gaya majalah di mana beberapa artikel merentangi pelbagai lajur.
Petua
Gunakan unit fr untuk susun atur cecair yang menyesuaikan dengan saiz skrin. Sifat gap lebih bersih daripada menambah margin pada setiap sel. Mulakan dengan praset, kemudian laraskan saiz mengikut reka bentuk anda.
Privasi
Berjalan sepenuhnya dalam pelayar anda. Tiada konfigurasi grid atau data meninggalkan mesin anda.