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.

Ditulis dan ditinjau oleh tim editorial BroBroGo.Terakhir diperbarui:

Memahami Cara Kerja CSS Grid Generator

CSS Grid Generator adalah alat interaktif yang dirancang untuk membantu Anda merancang tata letak CSS grid secara visual. Dengan alat ini, Anda dapat menentukan jumlah kolom dan baris, mengatur ukurannya, serta menentukan jarak atau celah di antara kolom dan baris tersebut. Setelah struktur grid terbentuk, Anda cukup menyeret kursor (drag) di area grid untuk menempatkan item di dalam tata letak. Alat ini secara otomatis akan menghasilkan kode CSS dan HTML yang sesuai, yang kemudian dapat Anda salin dan tempel langsung ke dalam proyek web Anda.

Alat ini sangat cocok bagi siapa saja yang ingin membuat prototipe tata letak CSS grid dengan cepat, menghasilkan kode CSS dan HTML tanpa harus menulisnya secara manual, memvisualisasikan pengaruh ukuran kolom dan baris yang berbeda terhadap tata letak, serta membuat struktur tata letak umum seperti bilah sisi, header/footer, galeri, atau dasbor.

Mengatur Input Kolom, Baris, dan Celah

Untuk mulai membangun grid, Anda dapat menyesuaikan beberapa parameter input utama yang tersedia pada antarmuka alat:

  • Kolom: Menentukan jumlah kolom dengan nilai angka antara 1 hingga 12.
  • Baris (Rows): Menentukan jumlah baris dengan nilai angka antara 1 hingga 12.
  • Celah kolom: Mengatur jarak antar kolom dengan nilai antara 0 hingga 48px.
  • Celah baris (Row gap): Mengatur jarak antar baris dengan nilai antara 0 hingga 48px.
  • Ukuran kolom: Anda dapat memasukkan nilai CSS grid apa pun yang valid, seperti 1fr, 200px, auto, min-content, atau minmax(120px, 1fr).
  • Ukuran baris: Sama seperti kolom, bagian ini menerima nilai CSS grid valid seperti 1fr, 200px, auto, min-content, atau minmax(120px, 1fr).

Setiap jalur (baik kolom maupun baris) memiliki kotak ukurannya sendiri sehingga Anda dapat mengetikkan nilai grid secara spesifik pada masing-masing jalur. Jika Anda memasukkan nilai yang tidak valid (misalnya not-a-grid-track) pada kotak ukuran jalur, kolom input tersebut akan ditandai sebagai tidak valid, namun output CSS akan tetap mempertahankan nilai valid terakhir yang Anda masukkan.

Menempatkan dan Mengelola Item pada Grid

Proses penempatan elemen anak (child item) di dalam grid dilakukan secara visual dengan metode seret dan lepas (drag and drop). Anda cukup menekan dan menyeret kursor melewati sel-sel grid untuk menandai area persegi panjang. Saat Anda melepas klik mouse, area yang dipilih akan langsung menjadi item yang ditempatkan dan membentang di sepanjang kolom serta baris tersebut.

Berikut adalah aturan dan perilaku penting saat mengelola item di dalam alat ini:

  • Setiap item yang Anda gambar akan mendapatkan aturan grid-column dan grid-row tersendiri di dalam kode CSS, serta tag div yang cocok di dalam kode HTML.
  • Item dapat saling bertumpuk satu sama lain. Item yang digambar belakangan akan berada di posisi teratas (menumpuk di atas item sebelumnya).
  • Untuk menghapus item tertentu, Anda cukup mengklik tanda "×" yang ada pada item tersebut.
  • Alat ini mendukung pembuatan hingga maksimal 16 item.
  • Tombol Tambah item dapat digunakan untuk menghasilkan item HTML baru.
  • Tombol Bersihkan item akan menghapus semua item yang telah dibuat, menghasilkan kontainer HTML yang kosong, dan mengembalikan jumlah item menjadi 0.

Menggunakan Preset Tata Letak Instan

Bagi Anda yang membutuhkan struktur halaman web standar dengan cepat, CSS Grid Generator menyediakan beberapa pilihan preset siap pakai. Pilihan preset yang tersedia meliputi:

  • Bilah Sisi
  • Header & Footer
  • Galeri
  • Dasbor

Sebagai contoh, jika Anda memilih preset Galeri, alat ini secara otomatis akan menghasilkan konfigurasi berupa 3 kolom, 2 rows (baris), dan langsung menempatkan 3 item di dalamnya.

Memahami Kode Output CSS dan HTML

Setelah Anda selesai merancang tata letak secara visual, alat ini akan langsung memperbarui area output yang terdiri dari dua bagian utama:

  1. CSS: Menghasilkan kode CSS lengkap untuk kontainer grid (grid container) beserta aturan posisi spesifik untuk setiap item yang telah Anda tempatkan.
  2. HTML: Menghasilkan struktur kode HTML yang terdiri dari elemen kontainer utama dan elemen div untuk masing-masing item di dalamnya.

Alat ini juga menerapkan optimasi kode otomatis. Jika beberapa jalur (kolom atau baris) memiliki ukuran yang sama, kode output CSS akan menggabungkannya menggunakan fungsi repeat() agar tetap ringkas. Selain itu, meskipun celah kolom dan celah baris diatur secara terpisah pada input, keduanya akan disederhanakan menjadi satu properti gap saja di dalam CSS apabila nilai keduanya sama.

Keamanan dan Privasi Data Anda

Saat menggunakan CSS Grid Generator, Anda tidak perlu khawatir mengenai keamanan data atau konfigurasi yang Anda buat. Seluruh proses pembuatan grid dilakukan secara lokal dan dibangun langsung di dalam browser Anda. Tidak ada satu pun pengaturan, ukuran, atau struktur tata letak yang Anda buat di dalam alat ini yang akan diunggah ke server luar atau ke BroBroGo.

Pertanyaan yang Sering Diajukan (FAQ)

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.