CSS Grid - příručka o tvorbě layoutů CSS grid

10 min.
Rozložení mřížky CSS - Kompletní průvodce výukou mřížky CSS

Flexbox bychom už pomalu měli všichni znát a mnoha vývojářům určitě zajistil klidnější spaní. Ale co by se stalo, kdyby se rozvržení flexboxu dalo rozšířit nejen vertikálně, ale i horizontálně? Toto a ještě více je možné díky integraci CSS gridu.

Představte si, že by existovala možnost volně navrhovat své webové stránky ve dvourozměrné mřížce. Například vytvořením textových bloků, které částečně překrývají obrázky nebo ještě složitější galerie obrázků bez záporného okraje nebo umístění. Nebo pomocí CSS rychle navrhnout šablony stránek, které jsou ke všemu responzivní. To vše jednoduše vyřeší CSS grid.

Co je CSS grid?

Podobně jako nástroj flexbox je i CSS grid integrován pomocí kontejnerových prvků a prvků CSS gridu. Najdeme zde také například některé funkce pro umísťování flexboxu: align-items, justify items, justify self a align-self. Ty vám pomohou vhodně umístit obsahy gridu.

Obecně lze říct, že CSS grid je flexbox, který funguje dvoudimenzionálně:

What-Is-CSS-Grid
Jak funguje systém mřížky v nástroji Bootstrap

Zatímco u flexboxu můžeme řádky a odpovídající sloupce vytvářet pouze horizontálně, CSS grid nám dává možnost uspořádat je i vertikálně:

Rozložení mřížky CSS
Mřížka CSS je výkonný nástroj pro vytváření dvourozměrných rozvržení na webu.

Na první pohled se může zdát, že na CSS grid není nic výjimečného. Stejného výsledku lze přece dosáhnout i pomocí řádků a sloupců.

Čím je CSS grid tak výjimečný?

Díky novému systému mřížek můžete sestavit všechny myslitelné kombinace. Jedinou podmínkou je, že musí být obdélníkové. Například čisté tvary L nelze sestrojit.

Tímto způsobem můžete naplánovat a vytvořit celý layout stránky na základě CSS gridu. Vnořené mřížky jsou stejně možné jako kombinace CSS gridu a flexboxu.

Díky chytrému plánování můžete nyní také naprogramovat layouty tak, abyste se pokud možno obešli bez Media Queries, ale samozřejmě nemusíte. Různým možnostem se budu podrobněji věnovat později.

CSS grid obsahuje také řadu dalších nových triků, které vám v budoucnu usnadní život. Jednou z nich je nová jednotka CSS: tzv. fraction unit (fr). Funguje to podobně jako rozdělení velikosti itemů u flexboxu. 

Frakce (1fr) je část celého řádku. Pokud tedy rozdělíte mřížku na 3 × 4 jako v příkladu níže z CSS Tricks, pak 1fr = ¼ nebo 25 %.

Objevuje se zde také další specifikum: Ne všechna pole musí být vyplněna obsahem. Do mřížky CSS můžete vložit i prázdný obsah:

Prázdné místo v mřížce CSS
Prázdný obsah v mřížce CSS

W3Schools ukazuje další možné layouty, pro které se mřížky CSS hodí. Tímto způsobem můžeme snadno určit, že některé prvky mají být rozprostřeny horizontálně a vertikálně přes určitý počet políček. Rámečky mohou mít různou šířku (sloupce) a výšku (řádky).

Nejlepší rozvržení mřížky CSS
Rozložení v mřížce CSS

Ve výše uvedeném příkladu zabírá první sloupec procentuálně více šířky než ty ostatní. Je to proto, že šířka nebyla předem definována v CSS, a proto se automaticky orientuje podle obsahu. Totéž by se stalo, kdybychom vytvořili více obsahu, než jsme předem definovali v CSS. Mřížka se pak automaticky zvětší a připojí nový obsah.

Shopwares Einkaufswelten jsou založeny na systému podobném CSS grid - alespoň v backend zobrazení. V jejich editoru WYSIWYG lze obsah zobrazit v mřížce, která se na první pohled velmi podobá mřížce CSS. Na zkompilované stránce však není použita žádná mřížka CSS, alespoň ne ve výchozím nastavení.

Osvědčené postupy pro mřížky CSS
Přepracovaná úvodní stránka Shopware v nástroji Einkaufswelten Designer

Od roku 2017 je CSS grid podporován téměř všemi běžnými prohlížeči. Pouze u prohlížeče Internet Explorer je stále třeba pro verze 10 a dál předpony -ms-, aby bylo možné zobrazit mřížku CSS téměř zúplna. Naproti tomu prohlížeč Microsoft Edge již má plnou integraci. Nyní už nic nestojí v cestě používání CSS grid ve vašich budoucích projektech:

Definování mřížky CSS
Jaké prohlížeče podporují CSS grid

Jak vypadá CSS grid v praxi?

Jak již bylo naznačeno, základní funkci používáme podobně jako flexbox. Nejprve určíme kontejner, kterému přiřadíme funkce mřížky.

.container {
		display: grid;}

Existuje mnoho dalších hodnot, které lze zadat, a vytvořit tak mřížku dle svých představ:

grid-template-columns, grid-template-rows a grid-template-areas (společně je lze nastavit také pomocí grid-template). Tyto vlastnosti obsahují informace o počtu a velikosti řádků a sloupců. Vzdálenosti mezi nimi můžete definovat také pomocí vlastností column-gap a row-gap (nebo zkráceně gap).

Podobně jako u flexboxu máte také možnost určit celkové umístění v mřížce. K tomuto účelu slouží vlastnosti: justify-items, align-items (zkráceně: place-items), justify-content, align-content (zkráceně: place-content).

Pomocí vlastnosti grid-auto-flow můžete navíc určit, jakým směrem má mřížka proudit s hodnotami řádek (row), sloupec (column) nebo hustota (dense). Zatímco řádek a sloupec se starají o vodorovné a svislé zarovnání, hustota určuje, zda je mřížka vyplněna hospodárně. To znamená, že s touto hodnotou se může za určitých okolností měnit uspořádání prvků v mřížce, aby se vyplnilo jinak prázdné místo. Funkce je zajímavá zejména pro galerie obrázků. Takto se prvky v různých velikostech obrazovky v případě potřeby přesouvají a nevznikají žádné vizuální mezery.

Zatímco v kontejneru definujete sloupce, řádky a vzdálenosti mezi nimi, pomocí položek mřížky určujete, kde přesně se mají v mřížce nacházet. 

Hotová mřížka by pak z pohledu CSS mohla vypadat takto:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Po vytvoření kontejneru mřížky je třeba jej naplnit položkami. Zvláštností systému CSS grid je, že pořadí v HTML může být sekundární, protože každému prvku lze přidělit počáteční a koncovou souřadnici. To se provádí pomocí grid-column-start, grid-column-end, grid-row-start, grid-row-end .

Souřadnice ukazují na linie mřížky a počítají se zleva doprava, nebo shora dolů. Lze je opět zkráceně označit jako grid-column a grid-row. 

Pokročilí uživatelé mohou také použít funkci grid-area a zadat těmto polím všechny souřadnice najednou nebo přiřadit prvku mřížky název, jehož umístění v kontejneru pak můžete určit sami. Ovšem nejen položky mřížky můžete pojmenovat, také liniím mřížky je možné přiřadit názvy. Tím pádem se pomocí názvů nechá prvkům mřížky sdělit jejich souřadnice. Takže jste ušetřeni přepočítávání.

Možné je i používání záporných hodnot, nebo počítání zleva doprava, zdola nahoru. Toto je však zajímavější spíše pro pokročilé uživatele CSS Grid a podrobně si o nich můžete přečíst zde:

Konečně se nabízí i možnost individuálně určit umístění obsahu v položkách mřížky. K tomu slouží vlastnosti: justify-self a align-self (zkráceně: place-self).

Prvek mřížky v CSS může vypadat takto:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

Grid row-end a grid-column-end lze použít také pomocí "span +n". Ušetříte si tu zdlouhavé počítání řádků. "Span 2" říká, že prvek se má rozprostírat na dvou polích mřížky. Podrobné vysvětlení jednotlivých vlastností najdete v příručce o CSS tricích.

Příklady z webu

Pokud jste vizuální typ jako já, potřebujete vidět nějaké reálné příklady, abyste plně pochopili mřížku CSS. Za tímto účelem jsem trochu procházel internet a hledal stránky, které byly vytvořeny pomocí CSS gridu nebo které by z jeho použití mohly profitovat.

Mřížka CSS v praxi
Mřížka CSS pro vytvoření portfolia

Levon Biss použil CSS grid jako implementační nástroj pro vytvoření svého portfolia. Pokud si na jeho stránku posvítíte pomocí nástroje pro zkoumání, zjistíte, že stránka byla vytvořena pomocí vnořených mřížkových systémů. Nejprve byla stránka rozdělena na tři části: záhlaví, hlavní část a zápatí. Výška záhlaví a zápatí byla předdefinována, zatímco hlavní část s hodnotou "auto" může flexibilně růst s obsahem. Sloupce byly s 1fr nastaveny na celou dostupnou šířku.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

Hlavní část jeho stránky byla opět "zabalena" do mřížkového systému. Všimněte si, jak se zde smíchaly jednotky CSS px a fr. Tímto způsobem má každý okraj pevnou šířku 144px, zatímco střední část zůstává flexibilní.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Nakonec byla opět včleněna i galerie. Dříve nebyly pro mezery v mřížce uvedeny žádné hodnoty. Proto jsou 0. Pro galerii byly nyní nastaveny na 1em. Tím se ušetří přidávání okrajů mezi obrázky. Mezery tak můžete v dokumentu nastavit jednorázově. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Další speciální funkcí CSS gridu je funkce repeat(). Jedná se o zkrácený zápis opakujících se hodnot. 

Funkce repeat() přebírá jako první hodnotu sadu hodnot, které mají být vytvořeny, a jako druhou velikost. Rozepsané by to vypadalo následně:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
Mřížka CSS v praxi
Příklad webové stránky bez mřížky CSS

V tomto příkladu nebyla použita mřížka CSS. Stejně jako v předchozím příkladu jsme mohli mřížku buď vnořit, nebo kontejneru přidat okraj pro vnější odstupy.

Takto by mohlo vypadat rozdělení mřížky: 

Rozložení mřížky CSS
Příklad webové stránky s mřížkou CSS

Možný přístup k CSS může vypadat následně:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Rozložení mřížky CSS
I tento web by mohl profitovat z CSS gridu

Ačkoli by mřížka CSS mohla být přínosem pro celý web Larq, pro ilustraci jsem vybral pouze jednu malou oblast. Právě zde se zřetelně ukazuje výhoda dvoudimenzionální mřížky.

Takto by mohlo vypadat rozložení položek mřížky:

Prvky mřížky CSS Grid
Mřížka CSS na ukázkové stránce

Možný přístup k CSS může vypadat následně:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

Jak lze sjednotit CSS grid a WordPress?

V novém editoru WordPress lze nyní zobrazovat obsah ve výchozím nastavení také v řádcích a sloupcích. Rozložení mi však připomíná spíše Bootstrap a spol. a trochu mi chybí dvojrozměrnost. To si pravděpodobně mysleli i ostatní, a proto pro WordPress vyvinuli plugin Grids: Layout builder. Plugin je zdarma a dělá přesně to, co slibuje: umožňuje vizuálně vytvářet mřížky CSS bez použití nástroje pro tvorbu stránek.

Mřížka CSS Shopify
Plugin Grids: Layout builder pro WordPress v provozu

Zvláštností mřížky CSS grid je možnost překrývání bez použití záporného okraje nebo absolutního polohování. Přesně to bez problému umožňuje i plugin. Pomocí z-indexu, ale i uspořádání v samotné mřížce (poslední prvek je nahoře, první dole) se nechají zobrazovat hierarchie.

Výše uvedený příklad by mohl jako webová stránka vypadat takto:

Jak používat mřížku CSS
Mřížka CSS jako praktický příklad

CSS grid a @media query

CSS grid lze samozřejmě volně používat s flexboxem a media query. CSS grid však přináší ještě jednu novou funkci: minmax().

Jak již název napovídá, jedná se o minimální a maximální hodnoty. Můžete ji použít ve spojení se sloupci. Na rozdíl od media query se zde nezjišťuje velikost obrazovky, ale velikost prvku. Pokud se rámeček zmenší natolik, že nedosáhne minimální velikosti, prvky se zvětší a posunou tak, aby se do něj opět vešly.

Funkce Minmax() pracuje ve spojení s funkcí auto-fit a může vypadat následně:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Zde se vytvářejí sloupce, které mají minimální velikost 240px, avšak maximální velikost 1fr. V tomto příkladu odpovídá 1fr celé šířce mřížky. To umožňuje umístit několik položek mřížky vedle sebe, pokud je tam místo, ale když není, lze použít celou šířku.

V souvislosti s Media Query však najdeme i výhody. Pomocí souřadnic můžete položky mřížky umístit a uspořádat pro každé zařízení jinak. Zejména v mobilních zařízeních, kde může převládat jiná hierarchie než u stolního počítače, se může získat příjemný uživatelský zážitek.

Přehled všech specifik

  • FR (fraction) jako nová jednotka CSS
  • Plochy a linie mřížky lze pojmenovat
  • Grid-column-end, možné použití se "span n"
  • Deklarování stejných sloupců nebo řádků pomocí repeat()
  • Položky mřížky lze libovolně uspořádat (i s překrýváním)

Další zdroje informací k tématu

Máte nějaké další otázky?

Jaké máte dotazy ohledně CSS Grid? Těšíme se na vaše připomínky. Zajímáte se o webový design, vývoj a další témata WordPress ? Pak sledujte RAIDBOXES na Twitteru, Facebooku, LinkedIn nebo prostřednictvím našeho newsletteru.

Po studiu designu počítačových her a kreativního psaní v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamifikaci a výzkum motivace uživatelů a jejích zkušeností, a s velkou vášní a zvědavostí na technologické trendy.

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.