Penjana Grid CSS
Tentukan lajur, baris dan jurang secara visual, kemudian salin kod templat Grid CSS untuk reka letak anda.
CSS Grid Generator
LiveCSS output
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px;
Key capabilities
- Tentukan lajur, baris dan jurang secara visual, kemudian salin kod templat Grid CSS.
- Berjalan dalam penyemak imbas anda
- Percuma untuk digunakan
Cara menggunakan
- Tetapkan kiraan lajur dan baris.
- Tarikan jurang dan saiz trek.
- Salin CSS grid.
How this tool works
- Tetapkan kiraan lajur dan baris.
- Tarikan jurang dan saiz trek.
- Salin CSS grid.
Recommended settings
- Gunakan pilihan lalai dahulu, kemudian laraskan jika perlu
Supported formats
Text / on-page input
File size and limits
- Pratonton berbilang lapisan yang sangat kompleks mungkin terasa lebih perlahan pada telefon lama.
Privacy
Penjana warna & CSS dijalankan sepenuhnya dalam penyemak imbas anda. Pratonton dan penukaran tidak sekali-kali memuat naik gaya anda.
Common use cases
- Gunakan Penjana Grid CSS pada bila-bila masa anda perlukan: Tentukan lajur, baris dan jurang secara visual, kemudian salin kod templat Grid CSS.
Troubleshooting
Pratonton kelihatan berbeza selepas tampal
Semak CSS yang bersaing pada halaman anda (set semula, warna yang diwarisi). Salin peraturan yang dijana ke dalam helaian gaya terpencil dahulu.
Soalan Lazim
Adakah ini memuat naik CSS saya?
Tidak. Penjana dan penukar berjalan dalam penyemak imbas anda dengan pratonton langsung.
Adakah saya memerlukan akaun?
Tidak. Buka alat, tweak kawalan dan salin CSS.
Alat berkaitan
Flexbox Generator
Experiment with flex direction, wrap, justify, and align — see layouts update live.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolBox Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open tool