CSS Grid Generator

Atur kolom dan baris Anda, seret kursor melewati sel untuk menempatkan item, lalu salin kode CSS grid beserta HTML yang cocok dalam sekali klik.

Preset
Item
CSS
HTML
Seret kursor melewati grid untuk menempatkan item.

Grid Anda dibuat langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.

Tanya Jawab

Bagaimana cara menempatkan item pada grid?

Tekan dan seret kursor melewati sel-sel grid untuk menandai area persegi panjang — saat Anda melepasnya, area tersebut akan menjadi elemen anak (child) yang menempati kolom dan baris tersebut. Setiap item yang Anda gambar akan mendapatkan aturan grid-column dan grid-row tersendiri di kode CSS serta tag div yang cocok di kode HTML. Item dapat saling bertumpuk, dan item yang digambar belakangan akan berada di posisi teratas; gunakan tanda × pada item untuk menghapusnya.

Apakah kolom dan baris bisa memiliki ukuran yang berbeda?

Ya. Setiap jalur (track) memiliki kolom ukurannya sendiri, dan Anda dapat mengetikkan nilai grid apa pun di sana — seperti 1fr, 200px, auto, min-content, atau minmax(120px, 1fr). Jalur yang memiliki ukuran yang sama akan digabungkan menggunakan fungsi repeat() agar kode output tetap ringkas. Celah kolom (column gap) dan celah baris (row gap) diatur secara terpisah, dan akan disederhanakan menjadi satu properti gap jika nilainya sama.

Apa yang harus saya lakukan dengan kode yang dihasilkan?

Salin kode CSS dan HTML secara berdampingan. Kode HTML menyediakan kontainer dengan satu tag div untuk setiap item, sedangkan kode CSS mendefinisikan grid dan memosisikan masing-masing item tersebut. Tempelkan keduanya ke dalam proyek Anda untuk mendapatkan tata letak yang persis sama dengan yang Anda gambar di sini.

CSS Cubic Bezier GeneratorGeser kedua handle untuk membentuk kurva easing, saksikan pergerakan titik animasi dibanding gerakan konstan, lalu salin nilai cubic-bezier().Flexbox GeneratorAtur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.Border Radius GeneratorBulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.Kalkulator CSS clamp()Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.