Lompat ke konten
Aback Tools Logo

Generator CSS Grid

Buat layout CSS Grid secara visual dengan kontrol kolom, baris, dan celah — seketika dan gratis. Pilih dari satuan fr, px, %, atau auto untuk kolom maupun baris. Enam prasetel layout memberi titik awal instan. Lihat pratinjau grid langsung dengan sel bernomor dan salin CSS siap produksi dengan satu klik. Sepenuhnya privat, tanpa pendaftaran.

CSS Grid Generator
Visual CSS Grid layout builder. Set columns, rows, and gap values with live preview. Choose from layout presets and copy the generated CSS with one click.

Layout Presets

Columns

3
1fr

Rows

3

Auto rows size to fit content

Gaps

12px
12px
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
gap: 12px;

Live Preview

1
2
3
4
5
6
7
8
9
3 × 3 grid9 cellsGap: 12×12px

Mengapa Menggunakan Generator CSS Grid Kami?

  • Pratinjau Langsung & CSS Instan: Generator memperbarui pratinjau langsung dan keluaran CSS pada setiap perubahan — tanpa tombol yang perlu ditekan. Lihat tepatnya berapa kolom, baris, dan sel yang dibuat grid Anda dan salin deklarasi CSS dengan satu klik.
  • Satuan Fleksibel & Prasetel Layout: Pilih dari satuan fr, px, %, atau auto untuk kolom maupun baris. Enam prasetel layout memberi titik awal instan — dari grid 3 kolom sederhana hingga layout 12 kolom kompleks dan konfigurasi sidebar.
  • 100% Privat - Tanpa Unggah: Semua pembuatan CSS Grid terjadi lokal di browser Anda. Pilihan layout Anda tidak pernah meninggalkan perangkat dan tidak pernah dikirim ke server mana pun — aman untuk proyek klien dan sistem desain proprietary.
  • Gratis & Tanpa Batas: Buat layout grid tanpa batas tanpa pendaftaran, langganan, dan batas penggunaan. Generator ini sepenuhnya gratis selamanya tanpa iklan yang menghalangi antarmuka.

Kasus Penggunaan Umum Generator CSS Grid

  • Layout Halaman Responsif: Desainer web menggunakan generator untuk membuat prototipe layout halaman responsif dengan struktur kolom fleksibel. Satuan fr menciptakan grid cair yang beradaptasi dengan layar apa pun, sedangkan satuan px memberi kontrol presisi untuk sidebar dan header berlebar tetap.
  • React & Pustaka Komponen: Pengembang front-end menggunakan generator untuk merancang layout komponen berbasis grid untuk aplikasi React, Vue, dan Angular. Salin CSS tepatnya dan integrasikan ke gaya komponen, styled-components, atau solusi CSS-in-JS.
  • Serah Terima Desain ke Kode: Desainer menggunakan generator untuk menerjemahkan layout grid dari Figma, Sketch, atau Adobe XD menjadi kode CSS presisi untuk pengembang. Pratinjau visual cocok dengan mockup desain, menghilangkan tebakan saat serah terima.
  • Layout Template Email: Pengembang email menggunakan generator untuk merancang layout email tanpa tabel memakai CSS Grid (didukung di Apple Mail, Outlook.com, dan Yahoo Mail). Nilai kolom dan celah menghasilkan struktur email yang bersih dan responsif.
  • Pembelajaran & Eksperimen CSS: Pelajar front-end menggunakan generator untuk memahami bagaimana grid-template-columns, grid-template-rows, dan gap bekerja bersama. Pratinjau visual memudahkan melihat bagaimana setiap kontrol memengaruhi grid akhir.
  • Grid Kartu & Layout Galeri: Kreator konten menggunakan generator untuk merancang layout berbasis kartu untuk arsip blog, galeri produk, grid portofolio, dan widget dasbor. Pratinjau langsung menunjukkan jumlah sel dan penyelarasan tepatnya.

Apa Itu CSS Grid?

CSS Grid Layout (juga dikenal sebagai CSS Grid) adalah sistem layout dua dimensi yang memungkinkan Anda mengontrol kolom dan baris sekaligus. Berbeda dari Flexbox yang satu dimensi, Grid dapat menangani layout halaman kompleks dengan item yang selaras di kedua arah. Properti utamanya adalah grid-template-columns, grid-template-rows, dan gap (sebelumnya grid-gap). Generator CSS Grid kami membuat properti ini secara visual dan menghasilkan CSS siap produksi untuk browser modern apa pun.

Cara Kerja Generator CSS Grid Kami

  1. Atur kolom dan baris: Gunakan penggeser untuk mengatur jumlah kolom (1-12) dan baris (1-12). Pilih satuan untuk setiap dimensi — fr (fraksi ruang tersedia), px (piksel tetap), % (persentase kontainer), atau auto (menyesuaikan konten). Pratinjau langsung diperbarui seketika.
  2. Sesuaikan celah dan lebar/tinggi: Atur nilai celah kolom dan baris secara independen dengan penggeser (0-100px). Jika memakai satuan fr, px, atau %, atur ukuran track. Pratinjau menampilkan sel bernomor sehingga Anda melihat tepatnya berapa item grid yang bisa ditempatkan.
  3. Salin CSS: Klik «Salin CSS» untuk menyalin deklarasi CSS siap produksi ke clipboard. Keluarannya mencakup display: grid, grid-template-columns, grid-template-rows, dan gap.

Satuan CSS Grid Dijelaskan

  • fr (Satuan Fraksi): Mendistribusikan ruang tersedia secara proporsional antar kolom/baris. 1fr 2fr membuat dua kolom di mana kolom kedua dua kali lebih lebar dari yang pertama. Satuan fr adalah pilihan paling umum untuk layout grid responsif.
  • px (Piksel): Membuat track berukuran tetap yang tidak berubah saat kontainer diubah ukurannya. Gunakan px untuk sidebar berlebar tetap, grid ikon, dan elemen dengan kebutuhan ukuran presisi.
  • % (Persentase): Membuat track berukuran persentase dari lebar kontainer. Perhatikan bahwa nilai persentase dihitung dari ruang tersedia setelah celah dikurangi.
  • auto: Menyesuaikan ukuran track dengan kontennya. Kolom auto melebar hingga lebar item terlebar dan baris auto melebar hingga tinggi item tertinggi di baris tersebut.

Dukungan Browser & Praktik Terbaik

CSS Grid didukung di semua browser modern (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+) tanpa prefiks vendor. Untuk hasil terbaik, gunakan satuan fr untuk kolom responsif dan auto untuk baris yang menyesuaikan tinggi konten. Properti singkat gap menerima satu nilai (celah sama) atau dua nilai (baris kolom), yang ditangani otomatis oleh generator CSS Grid kami.

Pertanyaan yang Sering Diajukan

Generator CSS Grid adalah alat visual yang membuat kode layout CSS Grid dengan memungkinkan Anda mengatur jumlah kolom, baris, dan nilai celah serta melihat hasilnya langsung. Generator kami mendukung satuan fr, px, %, dan auto dengan enam prasetel layout. Semua pembuatan berjalan di browser Anda tanpa mengirim data ke server.

CSS Grid bersifat dua dimensi dan mengontrol kolom serta baris secara bersamaan, menjadikannya ideal untuk layout halaman. Flexbox bersifat satu dimensi untuk mendistribusikan item di sepanjang satu sumbu. Gunakan Grid untuk layout dan Flexbox untuk penyelarasan komponen.

Satuan fr (fraksi) mendistribusikan ruang yang tersedia secara proporsional antar track grid. Misalnya, grid-template-columns: 1fr 2fr membuat dua kolom di mana kolom kedua dua kali lebih lebar dari yang pertama. Ini satuan paling umum untuk layout grid responsif.

Ya. Semua pembuatan CSS Grid terjadi 100% di sisi klien, di browser Anda. Pilihan layout Anda tidak pernah dikirim ke server mana pun, tidak pernah disimpan, dan tidak pernah ditransmisikan.

Ya. Ini 100% gratis tanpa pendaftaran, tanpa fitur premium, dan tanpa batas penggunaan. Buat layout grid tanpa batas tanpa restriksi.

Generator kami mendukung empat satuan: fr (fraksi ruang tersedia), px (piksel tetap), % (persentase kontainer), dan auto (menyesuaikan konten). Pilih satuan berbeda untuk kolom dan baris secara independen.

Gunakan satuan fr untuk kolom dan Anda akan membuat grid responsif yang beradaptasi dengan lebar kontainer. Grid 3 kolom dengan kolom 1fr membagi ruang tersedia secara merata di ukuran layar apa pun.

Bisa. Gunakan nilai arbitrer di Tailwind: className="grid grid-cols-[repeat(3,1fr)] gap-4". Semua satuan (fr, px, %) berfungsi dengan sintaks nilai arbitrer Tailwind.