Přeskočit na hlavní obsah
LibraTool logoLibraTool

Generátor CSS Grid zdarma

Vizuálně navrhněte CSS grid — stopy, jednotky a mezery — a zkopírujte vygenerovaný CSS a HTML.

Funguje offline po načtení
Předvolby
Sloupce (3)
Řádky (2)
Náhled v reálném č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šechno běží v prohlížeči — nic se neodesílá.

Jak to funguje

Navrhněte CSS mřížku vizuálně: přidejte až 8 sloupců a 8 řádků, nastavte každou stopu na fr, px, auto nebo min/max-content a upravte mezery mezi řádky/sloupci. Číslovaný živý náhled se aktualizuje okamžitě a vygenerované CSS grid-template plus odpovídající HTML jsou jedno kliknutí od vaší schránky.

  1. 1
    Vytvarujte mřížku
    Přidejte/odeberte sloupce a řádky pomocí + a −.
  2. 2
    Nastavte stopy
    Každý sloupec a řádek má vlastní jednotku (1fr, 100px, auto…).
  3. 3
    Doladte mezery
    Samostatné posuvníky pro mezeru řádků a sloupců.
  4. 4
    Zkopírujte kód
    Produkčně připravené CSS a odpovídající kostra HTML.

Vše běží ve vašem prohlížeči — nic se nenahrává.

Související nástroje

↔️

Generátor CSS Flexbox

Experimentujte se směrem flexu, zalamováním, justify a align na živých prvcích — a zkopírujte CSS.

Vyzkoušet
📐

Generátor CSS clamp()

Generujte plynulou hodnotu CSS clamp() pro responzivní typografii a mezery. Nastavte minimální/maximální velikost a rozsah viewportu, zobrazte živý náhled a zkopírujte jednořádkové CSS.

Vyzkoušet
📓

Papír k tisku — linkovaný, čtverečkovaný, tečkovaný a notový (PDF)

Vytiskněte si vlastní papír: linkovaný (široký nebo college), čtverečkovaný, tečkovaný, izometrický, na nácvik psaní, notovou osnovu nebo poznámky Cornell, ve formátu A4, Letter, A5 nebo Legal, v libovolné barvě čar a s tolika stránkami, kolik potřebujete. Ostré vektorové PDF vytvořené ve vašem prohlížeči.

Vyzkoušet

Časté dotazy