CSS grid – průvodce pro práci s layouty CSS grid

CSS grid – průvodce pro práci s layouty CSS grid

Všichni už pomalu ale jistě známe flexbox a mnoha vývojářům určitě zajistil klidnější spánek. Ale co by se stalo, kdyby se layout flexboxu dal 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 hodnoty margin nebo umístění. Nebo si představte, jak pomocí CSS v rychlosti navrhnete šablony stránek, které jsou ke všemu responzivní. Na to vše existuje jedno řešení: 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ě, mřížka CSS 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 gridu 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 tomuto 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ě taky 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. 

Jedna 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á rozvržení, 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 gridu – alespoň v backendovém 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 od verze 10 a dál je stále potřeba mít 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 gridu 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 také určit, kterým směrem má mřížka proudit s hodnotami row, column nebo dense. Zatímco řádek a sloupec se starají o vodorovné a svislé zarovnání, určete, zda je mřížka vyplněna ekonomicky. To znamená, že tato hodnota může změnit uspořádání prvků v mřížce tak, aby vyplnily prázdný prostor. To je zajímavá funkce, zejména pro galerie obrázků. Tímto způsobem se prvky mohou pohybovat nahoru v různých velikostech obrazovky a neexistují žá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 gridu 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á itemu, ž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.

"*" povinný údaj

Rád bych se přihlásil k odběru newsletteru, abych byl informován o nových článcích na blogu, e-knihách, funkcích a novinkách ve WordPressu. Svůj souhlas mohu kdykoli odvolat. Více informací v našich Zásadách ochrany osobních údajů.
Toto pole slouží k ověření a nemělo by se měnit.

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ázela internet a hledala 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;
}

Kombinace mřížky CSS 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 apod. a trochu mi chybí dvojrozměrnost. To si pravděpodobně mysleli i ostatní, a proto vyvinuli plugin Grids: Layout builder for WordPress. 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 for WordPress v praxi

Zvláštností mřížky CSS 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 tento 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.

"*" povinný údaj

Rád bych se přihlásil k odběru newsletteru, abych byl informován o nových článcích na blogu, e-knihách, funkcích a novinkách ve WordPressu. Svůj souhlas mohu kdykoli odvolat. Více informací v našich Zásadách ochrany osobních údajů.
Toto pole slouží k ověření a nemělo by se měnit.

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 otázky týkající se CSS gridu? Neváhejte použít funkci komentáře. Chcete být informováni o nových příspěvcích o WordPress a webovém designu? Pak nás sledujte na Twitteru, FacebookuLinkedIn nebo prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

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