CSS Grid - velký průvodce výukou rozvržení CSS Grid

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

Flexbox už by měl být všem známý a mnoha vývojářům už přinesl klidnou noc. Ale co kdybyste mohli rozvržení Flexboxu rozšířit nejen vertikálně, ale i horizontálně? To a ještě více je možné díky integraci CSS Grid.

Představte si, že by existoval způsob, jak 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 můžete pomocí CSS rychle navrhnout šablony stránek, které jsou také responzivní. Na to všechno existuje řešení: CSS Grid.

Co je CSS Grid?

Podobně jako Flexbox je i CSS Grid integrován pomocí kontejnerového prvku a prvků CSS Grid. Najdeme zde také například některé vlastnosti pro pozicování Flexboxu: align-items, justify items, justify self a align-self. Ty vám pomohou vhodně umístit obsah mřížky.

Zhruba řečeno, CSS Grid je flexbox, který funguje dvourozměrně:

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 CSS Grid je poměrně nenápadný. 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 možné 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é rozvržení stránky na základě CSS Grid. Vnořené mřížky jsou stejně možné jako kombinace mřížky CSS Grid a Flexbox.

Díky chytrému plánování můžete nyní také naprogramovat rozvržení tak, abyste se pokud možno obešli bez dotazů na média, ale samozřejmě nemusíte. Podrobněji se různým možnostem budu věnovat později.

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

Zlomek (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ší zvláštnost: Ne všechna pole musí být vyplněna obsahem. Do mřížky CSS můžete přiřadit i prázdný obsah:

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

W3Schools ukazuje další možná rozložení, pro která jsou vhodné mřížky CSS. Tímto způsobem můžeme snadno určit, že určité prvky mají být rozprostřeny horizontálně a vertikálně na určitém počtu 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 v procentech větší šířku než 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.

Nákupní světy Shopware jsou založeny na systému podobném mřížce CSS - alespoň v zadní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ň ve výchozím nastavení.

Osvědčené postupy pro mřížky CSS
Přepracovaná úvodní stránka aplikace Shopware v nástroji Návrhář nákupních světů

Od roku 2017 je mřížka CSS Grid podporována téměř všemi běžnými prohlížeči. Pouze verze prohlížeče Internet Explorer od verze 10 stále potřebují předponu -ms-, aby bylo možné zobrazit mřížku CSS téměř úplně. Naproti tomu prohlížeč Microsoft Edge již má plnou integraci. Nyní již nic nestojí v cestě použití CSS Grid ve vašich budoucích projektech:

Definování mřížky CSS
Které 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é můžete přiřadit a sestavit tak mřížku podle 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, jakým směrem má mřížka proudit s hodnotami řádek, sloupec nebo hustě. 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. Tato funkce je zajímavá zejména pro galerie obrázků. Tímto způsobem se prvky v případě potřeby přesouvají v různých velikostech obrazovky a nevznikají vizuální mezery.

Zatímco v kontejneru definujete sloupce a řádky a vzdálenosti mezi nimi, u položek mřížky určujete, kde přesně mají být v mřížce umístěny. 

Hotová mřížka by pak na straně 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 mřížky. Zvláštností systému mřížky CSS je, že pořadí v HTML může být sekundární, protože každému prvku můžete 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 také zkráceně označit jako mřížka-sloupec a mřížka-řádek. 

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 mřížky pak můžete určit sami. Položky mřížky však můžete nejen pojmenovat. Čárám mřížky je také možné přiřadit názvy, abyste pomocí těchto názvů mohli prvkům mřížky sdělit jejich souřadnice. Díky tomu nemusíte počítat v mřížce.

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

Nakonec máte také 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;}

Konec řádku mřížky a konec sloupce mřížky lze použít také pomocí "span +n". Zde si ušetříte zdlouhavé počítání řádků. "Rozpětí 2" říká, že prvek má přesahovat dvě pole mřížky. Podrobné vysvětlení jednotlivých vlastností najdete v příručce Triky CSS.

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 Grid nebo které by z jeho použití mohly mít prospěch.

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 se na jeho stránku podíváte blíže 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í 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 nastaveny s 1fr 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 vnořena i galerie. Dříve nebyly pro mezery v mřížce uvedeny žádné hodnoty. 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 jednou. 

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

Další speciální funkcí CSS Grid 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 hodnotu velikost. V písemné podobě by to vypadalo takto:

.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 přidat do kontejneru mřížky okraj pro vnější odstup.

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 takto:

.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
Tento web by také mohl využít CSS Grid

Ačkoli by mřížka CSS mohla být přínosem pro celý web Larq, pro ilustraci jsem vybral pouze malou oblast. Právě zde se jasně ukazuje výhoda dvourozměrné 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 takto:

.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 kombinovat CSS Grid a WordPress ?

V novém editoru WordPress lze nyní obsah ve výchozím nastavení zobrazovat 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 vyvinuli Plugin Grids: Layout builder pro WordPress . Stránka 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
Mřížky Plugin : Tvůrce rozvržení 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 pozicování. Přesně to je možné díky webu Plugin . Pomocí z-indexu a také pomocí uspořádání v samotné mřížce (poslední prvek je nahoře, první dole) lze zobrazit hierarchie.

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

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

Mřížka CSS a dotaz @media

Mřížku CSS 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 dotazu na média 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 takto:

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

Zde se vytvářejí sloupce, které mají minimální velikost 240px, ale 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 ved le sebe, pokud je na nich místo, ale pokud není dostatek místa, lze použít celou šířku.

V souvislosti s dotazem na média však existují také 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ž na stolním počítači, to může přinést příjemný uživatelský zážitek.

Přehled všech speciálních funkcí

  • FR (zlomek) jako nová jednotka CSS
  • Plochy a linie mřížky lze pojmenovat
  • Grid-column-end, lze použít s "span n
  • Deklarování stejných sloupců nebo řádků pomocí repeat()
  • Citlivé zobrazení pomocí funkce minmax() + automatické přizpůsobení/automatické vyplnění
  • Položky mřížky lze v mřížce 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.

Podobné články

Komentáře k tomuto článku

Napsat komentář

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