CSS Grid je moderní a výkonný layout systém, který umožňuje vytvářet komplexní mřížková rozvržení webových stránek s minimálním množstvím kódu. Zatímco starší techniky jako float nebo inline-block byly často komplikované a nepřehledné, Grid layout CSS nabízí intuitivní a elegantní přístup k tvorbě dvourozměrných layoutů. CSS mřížka vám dává plnou kontrolu nad umístěním prvků jak v řádcích, tak ve sloupcích současně. Grid je ideální pro komplexní rozvržení celých stránek, dashboardy, galerie obrázků nebo kdykoliv potřebujete precizní kontrolu nad umístěním více elementů. Společně s Flexboxem tvoří Grid základ moderního responzivního designu.
Co je to CSS Grid?
CSS Grid je dvourozměrný layoutový systém zavedený v CSS3, který umožňuje vytvářet mřížková rozvržení přímo v CSS bez potřeby hacků nebo frameworků. Grid funguje na principu definice mřížky s řádky a sloupci, do které pak umisťujete jednotlivé elementy.
Základní princip je jednoduchý: vytvoříte rodičovský kontejner s display: grid, definujete strukturu mřížky pomocí grid-template-columns a grid-template-rows, a pak umístíte potomky do konkrétních buněk mřížky. Grid automaticky vytvoří potřebné řádky a sloupce a poradí si i s responzivním chováním.
Grid vs Flexbox – kdy použít co?
CSS Grid a Flexbox nejsou konkurenční technologie, ale vzájemně se doplňující nástroje. CSS Grid je dvourozměrný systém – pracuje současně s řádky i sloupci. Používejte Grid, když potřebujete kontrolovat rozvržení ve dvou dimenzích současně, vytváříte komplexní layout celé stránky nebo potřebujete vytvořit asymetrická nebo překrývající se rozvržení.
Flexbox je jednorozměrný systém – pracuje buď s řádkem, nebo sloupcem. Používejte Flexbox pro jednoduché centrování obsahu, vytváření navigace, menu nebo toolbary. V praxi často používáte Grid pro hlavní layout stránky a Flexbox pro uspořádání obsahu uvnitř jednotlivých sekcí.
Základní koncepty CSS Grid
Pro efektivní práci s Grid musíte rozumět několika klíčovým konceptům:
Grid Container
Grid Items
Grid Lines
Grid Track
Fr jednotka
Gap
rodičovský element s display: grid definující grid kontext
přímí potomci grid containeru automaticky umístění do mřížky
dělicí čáry tvořící strukturu gridu
prostor mezi dvěma sousedními grid lines (řádky nebo sloupce)
zlomek dostupného prostoru, 1fr znamená jednu část
mezera mezi grid tracks
Responzivní Grid layout
Grid exceluje v responzivním designu díky flexibilním jednotkám a schopnosti měnit strukturu mřížky pomocí media queries. Můžete také použít auto-fit nebo auto-fill pro automatické přizpůsobení bez media queries.
Grid se automaticky přizpůsobí šířce kontejneru a vytvoří tolik sloupců, kolik se vejde. Na mobilním telefonu automaticky přejde na jeden sloupec, na tabletu dva až tři a na desktopu čtyři a více. Můžete také měnit celou strukturu layoutu na různých breakpointech.
Pokročilé Grid vlastnosti
Grid nabízí robustní možnosti zarovnání a umístění:
-
Justify-items a align-items
-
Grid template areas
-
Minmax funkce
-
Grid auto-placement
-
Overlapping prvků
justify-items řídí zarovnání grid items v horizontálním směru (podél řádku), zatímco align-items řídí zarovnání ve vertikálním směru (podél sloupce). Hodnoty mohou být start, end, center nebo stretch.
Výkonná technika pro pojmenování oblastí gridu. Můžete definovat layout pomocí ASCII art stylu – např. "header header" "sidebar main" "footer footer". Velmi intuitivní pro komplexní layouty.
Funkce minmax() definuje minimální a maximální velikost track. Například grid-template-columns: minmax(200px, 1fr) vytvoří sloupec, který nikdy nebude užší než 200px, ale může růst.
Vlastnost grid-auto-flow řídí, jak se automaticky umisťují items, které nemají explicitní pozici. Můžete použít hodnoty row (výchozí), column, nebo dense pro husté vyplnění mezer.
Grid umožňuje překrývání prvků pomocí grid-row a grid-column. Můžete umístit více items do stejné buňky a řídit jejich vrstvení pomocí z-index.
Grid vs Tabulky
Začátečníci často používají CSS Grid jako náhradu za HTML tabulky. Je důležité pochopit rozdíl: tabulky jsou pro tabulková data (ceníky, statistiky, kalendáře), zatímco Grid je pro layout stránky (rozvržení sekcí, galerie, dashboardy). Nikdy nepoužívejte tabulky pro layout – to je zastaralá praktika z 90. let. Grid poskytuje flexibilitu, responzivitu a sémanticky správný kód. Tabulky mají své místo, ale pouze pro zobrazení strukturovaných dat, ne pro rozvržení stránky.
Kombinování Grid s Flexbox
V praxi často kombinujete Grid a Flexbox pro optimální výsledky. Použijte Grid pro hlavní layout stránky – definujte header, sidebar, main content a footer pomocí grid areas. Pak uvnitř každé sekce použijte Flexbox pro zarovnání menších komponent. Například header může být grid item, ale navigační menu uvnitř headeru může být flexbox kontejner. Tato kombinace poskytuje nejlepší z obou světů – dvourozměrnou kontrolu pro celkový layout a jednorozměrnou flexibilitu pro komponenty.
Podpora v prohlížečích a fallbacky
CSS Grid má vynikající podporu ve všech moderních prohlížečích. Od roku 2017 je Grid plně podporován v Chrome, Firefox, Safari, Edge a Opera. Pokud však potřebujete podporovat starší prohlížeče, můžete použít feature detection pomocí @supports a poskytnout fallback řešení.
V praxi dnes již většina webů nepotřebuje fallback, protože podíl uživatelů se starými prohlížeči je minimální. Vždy však zkontrolujte statistiky návštěvnosti vašeho webu.
Nejčastější otázky o CSS Grid
Co je to CSS Grid a k čemu slouží?
CSS Grid je moderní layoutový systém zabudovaný přímo do CSS, který umožňuje vytvářet komplexní dvourozměrná rozvržení webových stránek s minimálním množstvím kódu. Na rozdíl od starších technik jako float nebo positioning, Grid poskytuje intuitivní a výkonný způsob, jak definovat strukturu stránky pomocí řádků a sloupců. Grid slouží k vytváření layoutů, kde potřebujete precizní kontrolu nad umístěním více elementů současně. Největší výhodou Grid je, že pracuje ve dvou dimenzích současně, což umožňuje vytvářet sofistikovaná rozvržení. Grid je dnes plně podporován ve všech moderních prohlížečích.
Jaký je rozdíl mezi CSS Grid a Flexbox?
Hlavní rozdíl mezi CSS Grid a Flexbox spočívá v počtu dimenzí, se kterými pracují. Flexbox je jednorozměrný layoutový systém – pracuje buď s horizontálním řádkem, nebo vertikálním sloupcem. Je perfektní pro distribuci prostoru mezi elementy podél jedné osy a pro flexibilní zarovnání obsahu. Grid je naproti tomu dvourozměrný systém, který kontroluje rozvržení současně v řádcích i sloupcích. V praxi byste měli použít Flexbox pro jednodušší jednorozměrná rozvržení a Grid pro komplexnější dvourozměrné layouty. Důležité je, že Grid a Flexbox se nevylučují – často je nejlepší řešení kombinovat Grid pro hlavní layout stránky a Flexbox pro uspořádání obsahu uvnitř jednotlivých sekcí.
Jak vytvořit jednoduchý grid layout?
Vytvoření jednoduchého grid layoutu začíná aplikací display: grid na rodičovský kontejner. Pak definujete strukturu mřížky pomocí vlastnosti grid-template-columns pro sloupce. Například grid-template-columns: 1fr 1fr 1fr; vytvoří třísloupcový grid, kde každý sloupec zabírá stejný prostor. Jednotka fr (fraction) představuje zlomek dostupného prostoru. Pro mezery mezi elementy použijte vlastnost gap. Pokud chcete rozdílné mezery vertikálně a horizontálně, použijte gap: 20px 10px. Pro responzivní grid bez media queries použijte: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); – tím se grid automaticky přizpůsobí šířce kontejneru.
Je CSS Grid podporován ve všech prohlížečích?
CSS Grid má dnes vynikající podporu ve všech moderních prohlížečích. Od března 2017 je Grid plně podporován ve všech hlavních prohlížečích včetně Chrome, Firefox, Safari, Edge a Opera. To znamená, že naprostá většina uživatelů internetu dnes používá prohlížeč, který Grid plně podporuje. Podle statistik má CSS Grid globální podporu přes 96 % všech uživatelů. Problémem může být pouze Internet Explorer 11, který podporuje starou, prefixovanou verzi Grid s odlišnou syntaxí a omezenými možnostmi. Většina moderních projektů již IE11 nepodporuje. Pokud váháte, zda použít Grid, zkontrolujte statistiky návštěvnosti vašeho webu. Ve většině případů dnes můžete Grid používat bez obav.
Kdy použít Grid a kdy Flexbox?
Rozhodnutí mezi Grid a Flexbox závisí na konkrétní situaci a typu rozvržení, které vytváříte. Použijte CSS Grid, když pracujete s layoutem, který má jasnou strukturu v obou dimenzích – řádcích i sloupcích současně. Grid je ideální pro celostránkové layouty, galerie obrázků, karty produktů, dashboardy nebo kdykoliv potřebujete přesnou kontrolu nad umístěním více elementů ve 2D prostoru. Naproti tomu použijte Flexbox pro jednorozměrná rozvržení, kde uspořádáváte elementy podél jedné osy. Flexbox je perfektní pro navigační menu, toolbary, seznamy položek nebo centrování obsahu. V praxi nejlepším přístupem je kombinovat obě technologie – použijte Grid pro hlavní strukturu stránky a Flexbox pro menší komponenty uvnitř grid items.