LibraTool logoLibraTool

Besplatan CSS Grid generator

Vizuelno kreirajte CSS grid — trake, jedinice i razmake — i kopirajte generirani CSS i HTML.

Radi offline nakon učitavanja
Predefinisano
Kolone (3)
Redovi (2)
Pregled uživo
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>

🔒 Sve se odvija u vašem pregledniku — ništa se ne šalje na server.

Kako radi

Vizuelno dizajnirajte CSS grid: dodajte do 8 kolona i 8 redova, postavite svaki trak na fr, px, auto ili min/max-content, i podesite razmake redova/kolona. Numerisani pregled uživo se trenutno ažurira i generisan CSS grid-template plus odgovarajući HTML su na jedan klik od vašeg međuspremnika.

  1. 1
    Oblikujte mrežu
    Dodaj/ukloni kolone i redove sa + i −.
  2. 2
    Postavite trake
    Svaka kolona i red dobija svoju jedinicu (1fr, 100px, auto…).
  3. 3
    Podesite razmake
    Odvojeni klizači za razmak reda i kolone.
  4. 4
    Kopirajte kod
    CSS spreman za produkciju i odgovarajući HTML kostur.

Sve se odvija u vašem pregledniku — ništa se ne šalje.

Povezani alati

↔️

CSS Flexbox generator

Eksperimentišite sa smjerom fleksa, prelamanjem, poravnanjem elemenata uživo — i kopirajte CSS.

Probaj
📐

Generator CSS clamp()

Generišite fluidnu CSS clamp() vrijednost za responzivnu tipografiju i razmake. Postavite min/max veličinu i raspon viewporta, pogledajte prikaz uživo i kopirajte CSS u jednom redu.

Probaj
🧾

Generator faktura

Kreirajte profesionalnu fakturu i preuzmite uredan PDF — stavke, porez, popust, više valuta. Bez registracije, bez slanja na server, nacrt se čuva lokalno.

Probaj

Često postavljana pitanja