Co je to CSS Grid?
CSS Grid Layout je nejmocnější systém pro tvorbu rozložení (layoutu) dostupný v kaskádových stylech (CSS). Umožňuje rozdělit webovou stránku do dvourozměrné sítě sloupců a řádků. Prvky uvnitř mřížky pak můžete umisťovat přesně tam, kam potřebujete, aniž byste museli složitě zanořovat desítky HTML <div> tagů do sebe, jak tomu bylo v minulosti.
Jak funguje jednotka "fr"?
V generovaném kódu si můžete všimnout hodnoty 1fr. Zkratka fr znamená "fraction" (zlomek). Pokud nastavíte tři sloupce na 1fr 1fr 1fr, prohlížeč si automaticky vezme veškerý dostupný volný prostor a rozdělí ho na tři absolutně stejné části. Pokud byste jednomu sloupci dali 2fr, bude dvakrát širší než ty ostatní.
Flexbox nebo CSS Grid? Kdy použít co?
- Flexbox: Je určen pro jednorozměrná rozložení. Použijte ho tehdy, když potřebujete zarovnat prvky buď do řádku (menu, navigační lišta), nebo do sloupce, a nechcete řešit jejich přesnou šířku.
- CSS Grid: Je určen pro dvojrozměrná rozložení. Použijte ho tehdy, když stavíte kostru celého webu (Hlavička, Postranní panel, Hlavní obsah, Patička) nebo fotogalerii, kde prvky musí přesně lícovat v řádcích i sloupcích současně.