Generátor CSS Grid
Živý náhled
Proč používat vizuální generátor CSS Grid?
CSS Grid je nejsilnější layout systém v CSS, ale syntaxe má strmou křivku učení. S naším vizuálním generátorem můžete nastavovat mřížku pomocí posuvníků a rozbalovacích nabídek a okamžitě vidět efekt každé vlastnosti.
Živý náhled mřížky
Mřížka se aktualizuje v reálném čase při nastavování sloupců, řádků, mezer a zarovnání
Podpora fr jednotky
Šablony používají fr (zlomkovou) jednotku pro flexibilní mřížky přizpůsobující se velikosti kontejneru
CSS připravené k použití
Exportujte čistý blok .container CSS s grid-template-columns, rows, gap a align-items
Vytvoření CSS Grid rozložení
Nakonfigurujte sloupce a řádky
Nastavte počet sloupců a řádků mřížky pomocí posuvníků
Vyberte šablonu a mezery
Vyberte šablonu sloupců (stejná, pevná+flexibilní nebo responsivní minmax) a nastavte mezery
Zkopírujte CSS
Klikněte 'Kopírovat CSS' pro získání kompletního CSS bloku připraveného k vložení do stylopisu
Případy použití CSS Grid
Rozložení stránky
Vytvořte strukturu záhlaví/postranní panel/hlavní obsah/zápatí s pojmenovanými oblastmi mřížky
Dashboard
Vytvářejte komplexní rozložení dashboardu s kartami různých velikostí pomocí grid-column a grid-row span
Galerie
Vytvářejte dlaždicové nebo pravidelné galerie přizpůsobující se pomocí auto-fill a minmax
Magazínové rozložení
Vytvářejte redakční rozložení s nerovnoměrnými sloupci a obsah trvajícím více buněk
Nejlepší postupy pro CSS Grid
✓ Preferujte fr jednotku před procenty
fr (zlomková) jednotka rozděluje dostupný prostor po pevných sloupcích bez ruční kalkulace.
✓ Používejte minmax() pro responsivní mřížky
repeat(auto-fill, minmax(250px, 1fr)) vytvoří responsivní mřížku automaticky přizpůsobující počet sloupců.
✓ Používejte pojmenované oblasti mřížky
grid-template-areas s pojmenovanými buňkami dělá rozložení stránek čitelnými a snadno upravitelnými.
✓ Pochopte auto-fill vs. auto-fit
auto-fill vytvoří maximální počet stop (i prázdných). auto-fit sbalí prázdné stopy a rozšíří existující — obvykle optimální pro mřížky karet.
❓ Nejčastější dotazy
Co je fr jednotka v CSS Grid?
fr znamená 'zlomková jednotka'. 1fr představuje díl dostupného volného prostoru v kontejneru mřížky. repeat(3, 1fr) vytvoří 3 sloupce rovnoměrně sdílející dostupný prostor.
Jaký je rozdíl mezi CSS Grid a Flexbox?
Flexbox je jednorozměrný — umísťuje prvky podél jedné osy (řádek nebo sloupec). CSS Grid je dvourozměrný — může řídit řádky a sloupce současně, mnohem výkonnější pro layout stránek.
Co dělá minmax()?
minmax(min, max) specifikuje rozsah velikostí pro stopu mřížky. minmax(200px, 1fr) znamená, že sloupec je nejméně 200px široký, ale může růst pro vyplnění dostupného prostoru.
Kdy použít CSS Grid místo Flexbox?
Použijte Grid pro dvourozměrná rozložení kde řídíte řádky a sloupce současně. Použijte Flexbox pro jednorozměrná rozložení komponent jako navigační panely.