Pređi na glavni sadržaj
LibraTool logoLibraTool

CSS Grid generator — besplatno

Vizuelno dizajnirajte CSS mrežu — trake, jedinice i razmake — i kopirajte generisani CSS i HTML.

Radi van mreže kada se učita
Predlošci
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 izvršava u vašem pretraživaču — ništa se ne otprema.

Kako funkcioniše

Vizuelno dizajnirajte CSS mrežu: dodajte do 8 kolona i 8 redova, podesite svaku traku na fr, px, auto ili min/max-content, i podesite razmake reda/kolone. Numerisan pregled uživo se trenutno ažurira i generisan CSS grid-template plus odgovarajući HTML su jedan klik od vaše privremene memorije.

  1. 1
    Oblikujte mrežu
    Dodajte/uklonite kolone i redove sa + i −.
  2. 2
    Podesite trake
    Svaka kolona i red dobija sopstvenu jedinicu (1fr, 100px, auto…).
  3. 3
    Uskladite razmake
    Odvojeni klizači za razmak reda i kolone.
  4. 4
    Kopirajte kod
    Produkciono spreman CSS i odgovarajući HTML skelet.

Sve se izvršava u vašem pregledaču — ništa se ne otprema.

Slične alatke

↔️

CSS Flexbox generator

Eksperimentišite sa smerom, prelamanjem, raspodelom i poravnanjem stavki uživo — i kopirajte CSS.

Isprobajte
📐

Generator CSS clamp() vrednosti

Generišite fluidnu CSS clamp() vrednost za responzivnu tipografiju i razmake. Postavite min/maks veličinu i opseg viewport-a, vidite pregled uživo i kopirajte jednoliniski CSS.

Isprobajte
📓

Papir za štampu — linijski, kockasti, tačkasti i notni (PDF)

Odštampajte sopstveni papir: linijski (široke ili studentske linije), kockasti, tačkasti, izometrijski, za vežbanje rukopisa, notni sistem ili Cornell beleške, u A4, Letter, A5 ili Legal formatu, bilo koje boje linija, sa onoliko stranica koliko vam treba. Oštar vektorski PDF napravljen u vašem pregledaču.

Isprobajte

Česta pitanja