Papan Kerja CSS Grid Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

🎨

Papan Kerja CSS Grid

Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

Tentukan struktur grid

Atur jumlah kolom dan baris, atau masukkan nilai template kustom.

Sesuaikan spasi dan perataan

Kontrol celah antar kolom dan baris, serta atur justify-items dan align-items.

Salin CSS

Pratinjau tata letak grid dan salin kode CSS.

Loading tool...

What Is Papan Kerja CSS Grid?

CSS Grid Playground adalah pembangun interaktif untuk tata letak CSS Grid, sistem tata letak paling kuat di CSS. Grid menyediakan kontrol dua dimensi atas baris dan kolom secara bersamaan, membuatnya ideal untuk tata letak halaman yang kompleks. Alat ini menawarkan dua mode: mode otomatis menggunakan repeat(n, 1fr) untuk grid kolom sederhana dengan ukuran sama, sedangkan mode manual memungkinkan Anda memasukkan nilai template kustom seperti 1fr 2fr 1fr atau 200px auto 200px. Anda dapat mengontrol celah kolom dan baris secara independen, serta menyetel justify-items dan align-items untuk perataan konten dalam sel grid. Pratinjau visual menampilkan item grid berwarna sehingga Anda dapat melihat dengan tepat bagaimana konfigurasi tata letak Anda bekerja. Alat ini sangat baik untuk belajar Grid maupun membuat prototipe tata letak produksi.

Why Use Papan Kerja CSS Grid?

Mode template otomatis dan kustom untuk fleksibilitas
Kontrol celah kolom dan baris yang independen
Justify-items dan align-items untuk perataan konten sel
Pratinjau visual interaktif dengan item grid berwarna

Common Use Cases

Tata Letak Halaman

Desain tata letak halaman lengkap dengan header, sidebar, konten, dan footer.

Galeri Gambar

Buat galeri gambar grid responsif dengan spasi konsisten.

Tata Letak Dashboard

Bangun tata letak widget dashboard dengan area grid berukuran berbeda.

Belajar CSS Grid

Eksperimen dengan properti grid untuk memahami tata letak dua dimensi.

Technical Guide

CSS Grid diaktifkan dengan display: grid pada kontainer. grid-template-columns mendefinisikan trek kolom menggunakan nilai panjang, unit fr (fraksional), atau fungsi seperti repeat() dan minmax(). Unit fr mendistribusikan ruang yang tersedia secara proporsional. grid-template-rows bekerja dengan cara yang sama untuk trek baris. gap (atau row-gap dan column-gap) mengatur spasi antara trek. justify-items dan align-items mengontrol bagaimana konten diperbarui dalam sel grid. Item grid dapat menjangkau beberapa sel menggunakan grid-column: span n dan grid-row: span n. Area grid bernama menggunakan grid-template-areas menyediakan cara visual untuk mendefinisikan tata letak yang kompleks. Kata kunci auto-fit dan auto-fill dalam repeat() membuat tata letak responsif tanpa query media: repeat(auto-fit, minmax(250px, 1fr)) membuat sebanyak mungkin kolom dengan lebar minimum.

Tips & Best Practices

1
Gunakan satuan fr untuk pengaturan kolom fleksibel dan proposional
2
Gabungkan minmax() dengan auto-fit untuk tata letak responsif tanpa query media
3
Gunakan grid-template-areas untuk wilayah layout yang dapat dibaca dan diberi nama
4
Atur celah bukan margin untuk spasi antar sel yang konsisten

Related Tools

Tanah Main CSS Flexbox

Penggalang CSS Flexbox visual dengan kontrol interaktif untuk semua properti wadah fleksibel.

🎨 CSS & Design

Pembuat Tabel CSS

Buat tabel HTML yang cantik dengan warna, garis-garis, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Kolom CSS

Buat tata letak teks multi-kolom dengan jumlah kolom, jarak, dan gaya aturan yang dapat disesuaikan.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Frequently Asked Questions

Q Apa arti fr dalam CSS Grid?

fr adalah satuan pecahan yang mendistribusikan ruang tersedia secara proposional. 1fr 2fr membuat dua kolom di mana kolom kedua memiliki lebar dua kali lipat.

Q Bagaimana saya membuat grid responsif?

Gunakan repeat(auto-fit, minmax(250px, 1fr)) untuk grid yang menyesuaikan jumlah kolom secara otomatis berdasarkan lebar wadah.

Q Apakah item grid dapat tumpang tindih?

Ya, item grid dapat menduduki sel yang sama menggunakan penempatan eksplisit, sehingga menciptakan desain berlapis.

Q Kapan saya harus menggunakan Grid vs Flexbox?

Grid untuk tata letak dua dimensi (baris dan kolom). Flexbox untuk tata letak satu dimensi (satu baris atau kolom).

Q Apakah CSS Grid berfungsi di semua browser?

CSS Grid didukung oleh semua browser modern. IE11 mendukung spesifikasi Grid yang lebih lama dengan beberapa perbedaan.

About This Tool

Papan Kerja CSS Grid is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.