Generátor CSS Grid
CSS Grid generátor sestaví mřížku z počtu sloupců a řádků, mezer, volitelných vlastních hodnot grid-template a zarovnání položek, s živým náhledem a CSS připraveným ke zkopírování.
O tomto nástroji
CSS Grid generátor sestaví mřížku z počtu sloupců a řádků, mezer, volitelných vlastních hodnot grid-template a zarovnání položek, s živým náhledem a CSS připraveným ke zkopírování.
Jak ho použít
- Nastav počet sloupců a řádků.
- Uprav mezery mezi sloupci a řádky.
- Volitelně zadej vlastní šablony, například 200px 1fr 1fr.
- Vyber justify-items a align-items a klikni na Copy CSS.
Dobré vědět
- Jednotka fr dělí volný prostor: 1fr 2fr dá druhému sloupci dvojnásobnou šířku oproti prvnímu.
- repeat(3, 1fr) je zkratka pro tři stejně široké sloupce.
- column-gap a row-gap nastavují mezery mezi stopami mřížky.
- Grid je dvourozměrný a ovládá řádky i sloupce současně.
- repeat(auto-fit, minmax(200px, 1fr)) vytvoří responzivní mřížku bez media queries.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak v CSS vytvořím mřížku se 3 sloupci?
Na kontejneru použij display: grid; grid-template-columns: repeat(3, 1fr); a pro rozestupy přidej gap.
Co znamená fr v CSS Gridu?
fr je podíl dostupného volného prostoru v grid kontejneru.
CSS Grid, nebo Flexbox?
Grid je nejlepší pro dvourozměrné layouty, jako je struktura stránky nebo mřížka karet; Flexbox pro jednorozměrné řádky či sloupce.
Jak udělám responzivní mřížku bez media queries?
Použij grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); sloupce se pak automaticky zalamují podle dostupného místa.