CSS Grid Playground
Susun templat CSS Grid, jarak, dan penempatan secara visual lalu salin CSS tata letaknya.
Klik item bernomor di grid untuk memilih dan memindahkannya.
—
—
—
—
Belum ada item. Tambahkan item untuk menempatkannya pada grid.
PrasetelTentang CSS Grid Playground
CSS Grid Playground menyusun tata letak grid secara visual. Tambah dan hapus track kolom serta baris untuk membentuk grid-template-columns dan grid-template-rows, atur jarak antar kolom dan baris, serta sesuaikan keempat properti perataan — justify-items, align-items, justify-content dan align-content — sementara pratinjau langsung mencerminkan setiap perubahan.
Penempatan item adalah bagian di mana grid menjadi sangat kuat: tambahkan item, klik salah satunya di pratinjau untuk memilihnya, lalu atur posisinya dengan column start, column span, row start dan row span. Begitulah cara sidebar, header dan sel unggulan membentang di beberapa track — teknik di balik hampir semua tata letak grid di dunia nyata.
Tiga preset — holy grail, dashboard dan gallery — memuat struktur halaman klasik yang bisa Anda bedah dan sesuaikan. Setelah tata letaknya pas, salin CSS yang dihasilkan, lengkap dengan aturan grid container dan penempatan setiap item.
Cara menggunakan CSS Grid Playground
- Tambah atau hapus track kolom dan baris untuk menentukan grid template.
- Atur jarak antar kolom (column gap) dan antar baris (row gap).
- Sesuaikan kontrol perataan: justify-items, align-items, justify-content dan align-content.
- Tambahkan item, klik salah satunya di pratinjau, lalu atur column/row start dan span untuk menempatkannya.
- Muat preset holy grail, dashboard atau gallery untuk mempelajari tata letak klasik.
- Salin CSS yang dihasilkan ke dalam stylesheet Anda.