Pembuat CSS Grid
Pembuat tata letak CSS Grid visual dengan pembuatan kode
Pengaturan tata letak
Preset tata letak
Penempatan per item
Pilih item di pratinjau atau daftar untuk mengedit propertinya.
Referensi cepat CSS Grid
Track grid
Gunakan satuan fr untuk track fleksibel, px/% untuk track tetap, dan auto untuk track yang ukurannya mengikuti konten.
Fungsi repeat()
repeat(3, 1fr) adalah singkatan dari 1fr 1fr 1fr. Gunakan auto-fill atau auto-fit untuk grid responsif.
Item yang merentang
Gunakan span N untuk merentang N track, atau 1 / -1 untuk merentang semua kolom/baris.
Pratinjau langsung
Label garis hanya menampilkan 200 track pertama. CSS dan tata letak lengkap Anda tetap tersimpan.
CSS yang dihasilkan
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Ubah pengaturan atau pilih sebuah item. Pratinjau dan CSS diperbarui bersamaan.
Tentang Pembuat CSS Grid
Pembuat CSS Grid adalah alat visual interaktif untuk merancang dan menghasilkan tata letak CSS Grid. CSS Grid Layout adalah sistem tata letak dua dimensi paling andal yang tersedia di CSS, yang memungkinkan Anda menentukan kolom dan baris secara bersamaan. Alat ini menawarkan pendekatan langsung untuk mempelajari, bereksperimen, dan menghasilkan kode CSS Grid siap produksi.
Fitur utama
- Kontrol penuh atas grid-template-columns dan grid-template-rows dengan input bebas
- Tombol kolom dan baris cepat untuk prototipe cepat dengan track berukuran sama
- Slider row-gap dan column-gap independen untuk kontrol jarak yang presisi
- Kontrol perataan justify-items dan align-items
- Penempatan grid-column dan grid-row per item dengan tombol nilai cepat
- Label kustom untuk item grid guna memvisualisasikan area tata letak yang semantik
- Item bernomor berwarna pastel dengan indikator nomor garis grid
- Tata letak preset: Tata letak blog, Dasbor, Galeri foto, dan Halaman arahan
- Kode CSS yang dihasilkan otomatis dengan salin sekali klik
- Dukungan mode gelap penuh
Memahami CSS Grid
CSS Grid bekerja dengan menentukan kontainer grid yang memiliki track eksplisit atau implisit (kolom dan baris). Item yang ditempatkan di dalam kontainer otomatis diposisikan ke dalam sel, atau Anda dapat menempatkannya secara eksplisit dengan properti grid-column dan grid-row untuk mencakup beberapa track. Satuan fr mewakili pecahan dari ruang yang tersedia sehingga tata letak responsif menjadi mudah dibuat. Fungsi repeat() menyederhanakan definisi track yang berulang, dan fungsi seperti minmax() serta auto-fill/auto-fit memungkinkan grid yang benar-benar responsif tanpa media query.
Pola tata letak CSS Grid yang umum
CSS Grid ideal untuk tata letak tingkat halaman seperti desain blog dengan area header, sidebar, konten, dan footer; antarmuka dasbor dengan navigasi, konten utama, dan area widget; galeri foto dengan item yang mencakup beberapa baris dan kolom untuk efek mirip masonry; serta halaman arahan dengan bagian hero selebar penuh, grid fitur multikolom, dan area ajakan bertindak. Gunakan tombol preset untuk langsung menjelajahi pola-pola ini.
Grid vs Flexbox
Flexbox dirancang untuk tata letak satu dimensi (satu baris atau kolom), sedangkan CSS Grid unggul pada tata letak dua dimensi ketika Anda membutuhkan kontrol atas kedua sumbu sekaligus. Grid paling cocok untuk tata letak halaman dan susunan komponen yang kompleks, sementara Flexbox ideal untuk mendistribusikan ruang di antara item dalam satu baris. Banyak desain modern menggunakan keduanya bersama-sama, dengan Grid untuk struktur halaman secara keseluruhan dan Flexbox untuk perataan tingkat komponen.
Untuk siapa alat ini?
- Pengembang web yang membangun tata letak halaman dengan CSS Grid
- Insinyur frontend yang membuat prototipe sistem grid responsif
- Desainer UI/UX yang memvisualisasikan struktur grid sebelum implementasi
- Pelajar yang mempelajari teknik tata letak CSS dua dimensi
- Pengajar yang mengajarkan konsep CSS Grid dalam lokakarya atau kelas
- Siapa pun yang perlu dengan cepat membuat kode CSS Grid untuk proyek web mereka