Preskočiť na hlavný obsah
LibraTool logoLibraTool

Generátor CSS mriežky zadarmo

Vizuálne navrhujte CSS mriežku — stopy, jednotky a medzery — a skopírujte vygenerovaný CSS a HTML.

Po načítaní funguje offline
Prednastavenia
Stĺpce (3)
Riadky (2)
Náhľad v živom čase
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>

🔒 Všetko beží vo vašom prehliadači — nič sa nenahrávajúc.

Ako to funguje

Navrhnite CSS grid vizuálne: pridajte až 8 stĺpcov a 8 riadkov, nastavte každú stopu na fr, px, auto alebo min/max-content, a upravte medzery riadkov/stĺpcov. Číslovaný živý náhľad sa okamžite aktualizuje a vygenerované CSS grid-template plus zodpovedajúce HTML sú jedno kliknutie od vašej schránky.

  1. 1
    Tvarujte mriežku
    Pridávajte/odoberajte stĺpce a riadky pomocou + a −.
  2. 2
    Nastavte stopy
    Každý stĺpec a riadok dostane vlastnú jednotku (1fr, 100px, auto…).
  3. 3
    Doladte medzery
    Samostatné posuvníky pre medzeru riadkov a stĺpcov.
  4. 4
    Skopírujte kód
    Produkčne pripravené CSS a zodpovedajúca kostra HTML.

Všetko beží vo vašom prehliadači — nič sa nenahráva.

Súvisiace nástroje

↔️

Generátor CSS Flexbox

Experimentujte so smerom flex, zalomením, justifikáciou a zarovnaním na živých položkách — a skopírujte CSS.

Vyskúšajte
📐

Generátor CSS clamp()

Generujte plynulú hodnotu CSS clamp() pre responzívnu typografiu a medzery. Nastavte minimálnu/maximálnu veľkosť a rozsah viewportu, pozrite si živý náhľad a skopírujte jednoriadkové CSS.

Vyskúšajte
📓

Papier na tlač — linajkovaný, štvorčekovaný, bodkovaný a notový (PDF)

Vytlačte si vlastný papier: linajkovaný (široký alebo college), štvorčekovaný, bodkovaný, izometrický, na nácvik písania, notovú osnovu alebo poznámky Cornell, vo formáte A4, Letter, A5 alebo Legal, v ľubovoľnej farbe čiar a s toľkými stranami, koľko potrebujete. Ostré vektorové PDF vytvorené vo vašom prehliadači.

Vyskúšajte

Často kladené otázky