Playground Grid CSS

CSS Grid generator dan playground yang interaktif

CSS Grid generator ini mengubah sintaks grid yang abstrak menjadi sesuatu yang bisa Anda lihat dan seret. Atur kolom dan baris Anda, lihat pratinjau langsung menyusun ulang, lalu salin CSS, Tailwind, atau HTML yang bersih setelah tampilannya pas. Tidak ada yang perlu diinstal dan tidak ada akun yang perlu dibuat — seluruh CSS grid playground ini berjalan di browser Anda, sehingga layout yang Anda buat tidak pernah diunggah.

Baik Anda sedang belajar cara kerja grid, membuat prototipe dashboard, atau membangun ulang framework 12-kolom sebagai CSS murni, Anda bisa melakukannya di sini dalam hitungan detik. Berbeda dari Layoutit yang hanya menghasilkan output CSS tanpa pengeditan level item, atau CSS Grid Generator minimal milik Sarah Drasner yang tidak punya Tailwind atau link yang bisa dibagikan, UtiloKit menggabungkan ketiga format output plus dukungan named area dalam satu antarmuka.

Atur track Anda: kolom, baris, dan satuan

Sebuah grid didefinisikan oleh track-nya. Di tab Tracks Anda menambahkan sebanyak mungkin kolom dan baris yang Anda butuhkan dan memilih satuan untuk masing-masing: fr untuk pecahan fleksibel, px atau % untuk ukuran tetap, auto untuk menyesuaikan konten, atau minmax() untuk track yang fleksibel di antara minimum dan maksimum. Track bertetangga yang identik secara otomatis diciutkan dengan repeat(), sehingga tiga kolom yang sama menjadi repeat(3, 1fr) yang rapi alih-alih 1fr 1fr 1fr.

Atur kolom menjadi 12 dan Anda mendapat framework grid bergaya Bootstrap klasik sebagai CSS murni. Atur dua kolom dan dua baris untuk layout 2x2 dengan cepat. Output grid-template-columns dan grid-template-rows diperbarui dengan setiap perubahan sehingga Anda selalu melihat kode persis yang dihasilkan layout Anda.

Buat responsif dengan auto-fit dan minmax()

Mode responsive CSS grid generator menuliskan pola modern bebas media-query untuk Anda: repeat(auto-fit, minmax(200px, 1fr)). Pilih auto-fit atau auto-fill, atur lebar sel minimum, dan pratinjaunya menyusun ulang seiring Anda mengubah ukurannya — menambah kolom di layar lebar dan turun ke satu kolom di mobile. Ini adalah cara tercepat untuk membangun grid kartu yang cair yang bekerja di lebar layar mana pun tanpa menulis satu pun media query.

Perbedaan antara auto-fit dan auto-fill penting ketika grid memiliki lebih sedikit item dibanding yang bisa ditampung container. auto-fit menciutkan track kosong sehingga item yang terisi meregang untuk menutupi ruangnya. auto-fill menjaga track kosong sehingga item mempertahankan ukuran minimumnya. Playground ini membiarkan Anda beralih di antara keduanya dan melihat efeknya secara langsung, sesuatu yang tidak bisa ditunjukkan sumber daya CSS statis.

Tempatkan item dengan menyeret — atau beri nama area Anda

Dalam mode Tracks, pratinjaunya interaktif: seret melintasi sel untuk menjatuhkan item yang menyebar di antaranya, klik sebuah item untuk memilihnya, dan sesuaikan nilai awal serta rentang grid-column dan grid-row-nya di panel item. Ini cara tercepat untuk memahami cara kerja spanning — lebih cepat dari membaca dokumentasi, lebih cepat dari eksperimen di CodePen.

Lebih suka pendekatan yang mudah dibaca? Tab Areas menggunakan grid-template-areas — sketsakan layout Anda sebagai baris bernama seperti 'header header' 'sidebar main' dan generator membangun template-nya plus aturan grid-area untuk setiap region yang Anda beri nama. Sempurna untuk kerangka halaman dengan header, sidebar, main, dan footer. Layoutit punya editor area serupa tetapi tidak menghasilkan output Tailwind untuk layout berbasis area.

Salin CSS, Tailwind, atau HTML — dan bagikan dengan link

Setiap layout diekspor dengan tiga cara. Tab CSS memberi Anda aturan container plus aturan per-item. Tab Tailwind CSS grid generator menuliskan kelas utilitas yang sesuai — grid grid-cols-3 gap-4, col-span-2, dan nilai arbitrary untuk track kustom. Tab HTML memberi markup siap tempel. Link yang bisa dibagikan mengodekan seluruh konfigurasi ke dalam URL sehingga rekan tim membuka grid yang persis sama — tanpa akun, tanpa ekspor, tanpa screenshot yang dibutuhkan.

Gratis, privat, dan instan — tanpa unggah, tanpa akun

Tidak ada yang perlu didaftarkan dan tidak ada yang perlu diunduh. Membangun track, menyeret item, beralih ke auto-fit responsif, dan mengekspor kode semuanya terjadi secara lokal di browser Anda, sehingga pekerjaan Anda tidak pernah meninggalkan perangkat Anda. Berbeda dari tool desain berbasis web seperti Figma yang mengharuskan akun dan menyimpan pekerjaan Anda di server mereka, CSS grid playground ini sepenuhnya privat. Simpan bookmark generator layout grid ini dan gunakan kapan pun Anda perlu membangun, belajar, atau menyalin CSS grid — di perangkat apa pun, termasuk iPhone dan Android.

CSS Grid vs Flexbox: memilih tool yang tepat

CSS Grid secara inheren bersifat dua dimensi — ia menempatkan item melintasi baris dan kolom secara bersamaan dari satu aturan container. Flexbox bersifat satu dimensi: ia menyusun item sepanjang satu sumbu pada satu waktu, baik baris maupun kolom. Panduan klasik — "Grid untuk layout, Flexbox untuk komponen" — adalah titik awal yang berguna, tetapi garis praktisnya adalah ini: gunakan Grid kapan pun kedua dimensi penting sekaligus (dashboard, galeri foto, kerangka halaman), dan gunakan Flexbox ketika Anda hanya peduli pada satu sumbu (navbar, sebaris tombol, daftar tag).

Algoritma auto-placement milik Grid mengisi item ke sel yang tersedia berikutnya secara otomatis, mengalir kiri-ke-kanan dan atas-ke-bawah seperti urutan baca. Tambahkan grid-auto-flow: dense dan browser akan mengisi kembali celah sebelumnya dengan item yang lebih kecil — berguna untuk galeri bergaya masonry di mana Anda tidak ingin ada ruang kosong yang terbuang. Grid juga membedakan antara explicit grid (track yang Anda definisikan dengan grid-template-columns dan grid-template-rows) dan implicit grid (track tambahan yang dibuat browser secara otomatis ketika item melebihi definisi eksplisit). Anda mengontrol ukuran track implisit dengan grid-auto-columns dan grid-auto-rows.

Flexbox unggul ketika jumlah item tidak diketahui atau bervariasi, karena ia secara alami membungkus dan menyusun ulang tanpa perlu jumlah kolom yang dideklarasikan. Awan tag, daftar kartu yang di-flex-wrap, atau toolbar yang item-itemnya muncul dan menghilang saat runtime semuanya cocok secara alami dengan display: flex; flex-wrap: wrap. Kedua sistem ini juga dirancang untuk digabungkan: sebuah container CSS Grid bisa menampung sel-sel yang anaknya adalah container Flexbox, menggabungkan presisi struktural Grid dengan distribusi level-item Flexbox.

Named grid area: layout yang semantik dan mudah dirawat

Properti grid-template-areas memungkinkan Anda mendeskripsikan sebuah layout sebagai peta ASCII di dalam sebuah aturan CSS. Setiap string berkutip adalah satu baris, setiap kata di dalamnya adalah satu sel, dan mengulang kata yang sama di sel-sel yang bersebelahan menggabungkannya menjadi satu area. Kerangka halaman klasik terlihat seperti ini: "header header" "sidebar main" "footer footer". Beri nama setiap anak dengan grid-area: header, grid-area: sidebar, dan seterusnya, dan browser menghubungkannya ke region yang sesuai secara otomatis — tanpa nomor baris, tanpa aritmetika span.

Named area jauh lebih mudah dirawat dibanding penempatan berbasis nomor baris untuk layout yang akan disentuh oleh seluruh tim. Ketika desainer meminta sidebar dipindah ke kanan, Anda cukup mengubah satu string di grid-template-areas dan urutan DOM tetap persis sama — tanpa mengurutkan ulang markup, tanpa menghitung ulang indeks kolom. Ini juga memisahkan urutan visual dari urutan sumber, yang penting untuk aksesibilitas: pembaca layar mengikuti DOM, pengguna yang bisa melihat melihat susunan grid.

Named area adalah tool paling ampuh untuk desain ulang responsif tanpa perubahan DOM. Di dalam media query, Anda mendefinisikan ulang grid-template-areas ke string layout yang sama sekali berbeda — mengubah kerangka desktop tiga kolom menjadi satu kolom bertumpuk untuk mobile — dan setiap anak yang diberi nama memposisikan ulang dirinya sendiri tanpa JavaScript sama sekali. Digabungkan dengan perubahan grid-template-columns pada breakpoint yang sama, satu blok CSS bisa mengubah seluruh struktur halaman dari desktop ke tablet ke ponsel.

Satuan fr, keyword ukuran intrinsik, dan pola RAM

Satuan fr (fraction) mendistribusikan ruang yang tersisa setelah track berukuran tetap dan konten diselesaikan. 1fr 1fr 1fr membagi lebar yang tersisa menjadi tiga bagian yang sama. Yang krusial, fr memperhitungkan gap secara otomatis — gap dikurangkan sebelum pecahannya dihitung — sedangkan lebar persentase adalah dari total lebar induk dan mengabaikan gap, menyebabkan item meluber jika Anda tidak berhati-hati. Shorthand repeat(3, 1fr) persis setara tetapi skalanya tanpa pengulangan.

Selain fr, CSS Grid mendukung tiga keyword ukuran intrinsik. min-content membuat track sesempit kata terpanjang yang tidak bisa dipecah — berguna untuk kolom ikon atau track label yang seharusnya mengikuti kontennya. max-content membiarkan track tumbuh ke lebar alaminya yang paling lebar, mengabaikan container-nya. fit-content(value) adalah klamp pintar: ia berperilaku seperti max-content hingga maksimum yang diberikan, lalu berhenti tumbuh — berguna untuk sidebar yang seharusnya meregang mengikuti kontennya tetapi tidak boleh melebihi, katakanlah, 300px.

Teknik grid responsif paling ampuh adalah pola RAM — Repeat, Auto, Minmax: repeat(auto-fill, minmax(200px, 1fr)). Tidak perlu media query. Browser memasukkan sebanyak mungkin kolom minimum 200px yang bisa ditampung container; pada container 800px Anda mendapat empat kolom, pada container 480px Anda mendapat dua, pada container 300px Anda mendapat satu. Ganti auto-fill menjadi auto-fit dan track kosong menciut sehingga item yang terisi meregang mengisi barisnya. Satu baris CSS ini menggantikan blok media query tiga-breakpoint khas untuk grid kartu, galeri gambar, dan daftar produk.

Alignment di CSS Grid: sumbu, properti, dan shorthand place-*

CSS Grid memiliki dua sumbu alignment. Sumbu inline berjalan pada arah teks mengalir (kiri ke kanan dalam bahasa Inggris) dan sumbu block berjalan tegak lurus terhadapnya (atas ke bawah). Properti berawalan justify- bekerja pada sumbu inline; properti berawalan align- bekerja pada sumbu block. Perbedaan sumbu ini adalah kunci untuk memahami enam properti alignment tanpa perlu menghafal masing-masing satu per satu.

justify-items dan align-items mengontrol bagaimana setiap item diposisikan di dalam sel-nya sendiri. Default-nya adalah stretch, yang membuat item mengisi sel — itulah mengapa item grid meregang menutupi sel-nya secara default tanpa lebar atau tinggi eksplisit. Menetapkan keduanya ke center memusatkan setiap item di dalam sel-nya. justify-content dan align-content mendistribusikan ruang ekstra di seluruh grid, mirip dengan justify-content milik Flexbox untuk sumbu utama — berguna ketika total ukuran track lebih kecil dari container-nya. justify-self dan align-self adalah override per-item yang membuat sebuah item keluar dari alignment default container tanpa menyentuh item tetangga.

Shorthand place-items, place-content, dan place-self menggabungkan nilai block dan inline dalam satu deklarasi: place-items: center setara dengan align-items: center; justify-items: center. Ini melahirkan CSS yang terkenal ringkas untuk masalah yang dulu membutuhkan tabel dan JavaScript: display: grid; place-items: center — dua baris yang memusatkan satu anak baik secara horizontal maupun vertikal di dalam container-nya, menyelesaikan salah satu masalah layout paling sulit dalam sejarah CSS dengan aturan sesingkat mungkin.