Generator CSS Grid

Pembuat layout CSS Grid visual.

Preset:

Kolom (3)

Baris (2)

Gap kolom: 16pxGap baris: 16px

RataRata

Pratinjau

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Generator CSS Grid Gratis

Bangun layout CSS Grid secara visual.

Referensi

Properti	Deskripsi	Contoh
grid-template-columns	Kolom	1fr 1fr 1fr
grid-template-rows	Baris	auto 1fr auto
gap	Jarak	16px
justify-items	Horizontal	stretch
align-items	Vertikal	stretch

FAQ

Apa itu CSS Grid?

CSS Grid adalah sistem layout dua dimensi.

Grid vs Flexbox?

Grid 2D, Flexbox 1D.

Apa arti "fr"?

"fr" adalah pecahan ruang yang tersedia.

Dukungan browser?

Ya, semua browser modern.

Grid dan Flexbox bersama?

Ya, saling melengkapi.

Alat terkait

CSS Flexbox Generator CSS Gradient Generator CSS Shadow Generator Em/Px Converter

𝕏 Twitter in LinkedIn

Nilai alat ini

3.6 / 5 · 47 penilaian

Alat Lainnya

📐CSS Flexbox Generator 🌈CSS Gradient Generator 📐Em/Px Converter

Tetap Update

Dapatkan tips dev mingguan dan tool baru.

Tanpa spam. Berhenti kapan saja.

Enjoy these free tools?

☕Buy Me a Coffee