Langsung ke konten utama
LibraTool logoLibraTool

Generator CSS Grid gratis

Desain CSS grid secara visual — track, unit, dan gap — lalu salin CSS dan HTML yang dihasilkan.

Berfungsi offline setelah dimuat
Preset
Kolom (3)
Baris (2)
Pratinjau langsung
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Semuanya berjalan di browser Anda — tidak ada yang diunggah.

Cara kerja

Rancang CSS grid secara visual: tambahkan hingga 8 kolom dan 8 baris, atur setiap trek ke fr, px, auto, atau min/max-content, dan sesuaikan jarak baris/kolom. Pratinjau langsung bernomor diperbarui instan dan CSS grid-template yang dihasilkan plus HTML yang cocok tinggal satu klik dari clipboard Anda.

  1. 1
    Bentuk grid-nya
    Tambah/hapus kolom dan baris dengan + dan −.
  2. 2
    Atur trek
    Setiap kolom dan baris mendapat satuannya sendiri (1fr, 100px, auto…).
  3. 3
    Sesuaikan jaraknya
    Penggeser row-gap dan column-gap terpisah.
  4. 4
    Salin kodenya
    CSS siap-produksi dan kerangka HTML yang sesuai.

Semuanya berjalan di browser Anda — tidak ada yang diunggah.

Alat terkait

↔️

Generator CSS Flexbox

Eksperimen dengan flex direction, wrap, justify dan align pada item langsung — dan salin CSS.

Coba
📐

Generator CSS clamp()

Hasilkan nilai CSS clamp() yang fluid untuk tipografi dan spasi responsif. Atur ukuran min/maks dan rentang viewport, lihat pratinjau langsung, dan salin CSS satu baris.

Coba
📓

Kertas Cetak — Kertas Bergaris, Grafik, Kisi Titik, dan Kertas Musik (PDF)

Cetak kertas Anda sendiri: bergaris (garis lebar atau garis kuliah), grafik, kisi titik, isometrik, latihan menulis tangan, paranada musik, atau catatan Cornell, dalam A4, Letter, A5, atau Legal, warna garis apa pun, sebanyak halaman yang Anda perlukan. PDF vektor tajam yang dibuat di browser Anda.

Coba

Pertanyaan yang sering diajukan