CSS Grid: Začíná druhé dějství layoutového převratu

Naposledy upraveno: 28. 3. 2018 – Autor: Martin Michálek

CSS Grid je sada vlastností pro tvorbu layoutu vsazeného do pravidelné mřížky.

Síla Gridu je v tom, že můžeme mřížku definovat v obou směrech: v řádcích i sloupcích. Na rozdíl od flexboxu je tedy vhodnější pro celostránkové a komplexnější layouty.

Nevýhoda je v aktuální podpoře, ale to bude brzy vyřešeno. V době psaní textu zvládnou Grid aktuální verze všech relevantních prohlížečů. Problém je jen v Internet Exploreru 11, který podporuje jen starší verzi Gridu.

Jednoduchý příklad

Podobné demo asi budete znát z mých textů o flexboxu.

See the Pen CSS Grid Basics demo by Martin Michálek (@machal) on CodePen.

Řekněme, že naše HTML vypadá takto:

<div class="container">
  <div class="content">Content…</div>
  <div class="side-1">Side 1</div>
  <div class="side-2">Side 2</div>  
</div>

Obsahový sloupec content je na prvním místě, protože se v něm schovává to nejcennější na stránce – obsah. Méně důležité části side-1 a side-2 jsou pak na širších displejích po stranách.

Pojďme to nakódovat. Nejprve příprava na layout do mřížky:

.container {
  display: grid;
}

Toto – na rozdíl od display: flex – automaticky nic nedělá. Nedefinovali jsme mřížku, takže smůla. Vzhůru do ní:

@media screen and (min-width: 600px) {
  .container {
      grid-template-columns: 1fr 3fr 1fr;
  }
}  

Vytvoříme tím layout rozdělený na pět sloupečků mřížky. Přičemž první a poslední části pro postranní obsah zaberou jednu pětinu. Prostřední část (content) tři pětiny.

V HTML ovšem máme na první místě content, takže ještě musíme sáhnout po změně pořadí. Tu už znáte z flexboxu:

@media screen and (min-width: 600px) {
  .side-1 {
    order: -1;
  }
}

Ano, některé vlastnosti, které používáte z flexboxu můžete používat i v CSS Grid Layout. Kromě pořadí například i zarovnávání.

Zbývá doladit nějaké ty mezery mezi buňkami mřížky. V Gridu pro ty potřeby máme novou vlastnost grid-gap:

.container {
  …
  grid-column-gap: .5em;
}

Živé demo: cdpn.io/e/QaxGqX

Důležité vlastnosti Gridu

Nastavení rodiče mřížky

display: grid. Jak už jsem psal – sám o sobě nic nedělá. Jen nastaví „grid formatting context“, takže jeho přímí potomkové mohou mít specifické vlastnosti.

Definice mřížky

Vlastnosti grid-template-columns a grid-template-rows. Akceptují různé jednotky. Když bychom chtěli nastavit mřížku 3 × 3 buňky s využitím procent, pixelů i pružných jednotek, bude vypadat takto:

.layout {
  grid-template-columns: 25% 1fr 25%;
  grid-template-rows: 100px 1fr 100px;
}

Vytvoří to layout, kde první a poslední sloupec zabírá čtvrtinu šířky rodiče. První a poslední řádek pak 100px z jeho výšky. Prostřední pak zbytek. Je to vidět v živé ukázce:

See the Pen CSS Grid: Combining units in template-columns/rows by Martin Michálek (@machal) on CodePen.

Definice mezery mezi buňkami mřížky

Vlastnosti grid-column-gap a grid-row-gap. Opět přijímají všechny možné jednotky:

.layout {
  grid-column-gap: 20px;
  grid-row-gap: 1em;
}

K dispozici je také samozřejmě zkratka grid-gap, jejíž použití je vidět ve výšeuvedené ukázce.

Jednotka fr

Jde o „zlomkovou“ jednotku. Prostor neobsazený jinými jednotkami (px, em…) se dělí mezi sloupce layoutu označeními jednotkami fr. Je to v principu totéž jako „bezjednotkové“ míry ve flexboxu – například flex: 1.

Co je to vlastně mřížka?

  • Nic nového. Do pravidelné mřížky se už staletí sází velká část knížek, dnes i novin a tiskovin obecně.
  • Veteránům lze CSS Grid přiblížit jako tabulkový layout, jen daleko lépe udělaný a zbavený nevýhod.
  • Těm, kteří znají Bootstrap a podobné frameworky, lze Grid podat jako zdokonalený Bootstrap grid vestavěný v prohlížečích.
  • Všechno by to ale byla pravda jen částečně. Grid je daleko silnější než uvedené příklady.

Jak se grid liší od flexboxu?

  • Předně chci zdůraznit, že Grid nenahrazuje flexbox. Potřebujete obojí. Naučte se obojí.
  • Grid je silnější pro dvourozměrné layouty – po svislé i vodorovné ose. Flexbox se více hodí na rozvržení jednosměrná.
  • Grid budete asi častěji používat pro layout celé stránky, flexbox pro layout menších komponent. Ale není to pravidlo.
  • Grid je zaměřený více na „grid in“ layout, kdy se obsah musí vždy přizpůsobit mřížce. Flexbox je super na „content out“ situace, kdy se layout musí přizpůsobit obsahu. Více na rachelandrew.co.uk.
  • Grid je také silnější v responzivním designu. Budete potřebovat méně Media Queries, protože Grid má „really powerful functionality like auto layout, minmax(), repeat(), and auto-fill“. Píšou to na css-tricks.com.
  • Grid rozšiřuje možnosti dané flexboxem. Můžeme v něm dělat i dost neortodoxní layouty. Viz opět Rachel Andrew.

Zásadní plusy a mínusy

  • Hlavní výhoda: je stejná jako u flexboxu - jde o systém vymyšlený pro tvorbu layoutu. Zbavíme se hacků a desítek až stovek řádků zbytečného CSS i HTML kódu.
  • Hlavní nevýhoda: Podpora zatím není plná: Neumí jej hlavně starší verze moderních prohlížečů. IE 11 podporuje starší verzi Gridu, která zdaleka neodpovídá variantě podporované v moderních prohlížečích. caniuse.com/grid

Grid v Internet Exploreru 11

Explorer a starší Edge podporují dnes už neplatnou specifikaci Gridu. Má jinou syntaxi a jde o podmnožinu dnešních možností Gridu. Navíc nepodporuje automatické umísťování prvků do mřížky. A neumí vlastnost grid-gap… No mohli bychom pokračovat.

Díky tomu neexistuje automatizované řešení pro zpětnou kompatibilitu typu Autoprefixeru. Na druhou stranu nám existence „explorerového“ Gridu v mnoha případech umožní mřížku vcelku bez problémů používat už dnes. Jen je potřeba se kromě základních vlastností dnešního Gridu naučit i ten starší.

Vezměme příklad třísloupcového layoutu z prvního dema na této stránce:

See the Pen CSS Grid Basics demo (with IE11 support) by Martin Michálek (@machal) on CodePen.

Začneme tím nejjednodušším.

display: -ms-grid

Ano, prostě to zapíná Grid. Pak přidáme samotný layout:

.layout {
  -ms-grid-columns: 1fr 3fr 1fr
}

Ten v moderních prohlížečích řešíme vlastností grid-template-columns.

IE11 nepodporuje automatické umísťování do mřížky, takže to u jednotlivých položek musíme obstarat ručně:

.content {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;    
    margin-right: .5em;    
}  

content umísťujeme do druhého sloupečku mřížky (-ms-grid-column: 2) a říkáme, že zabere jen jeden sloupeček té mřížky (-ms-grid-column-span: 1).

Asi si všimnete vlastnosti margin-right. Přesně tak, mezeru mezi sloupečky musíme dělat starými prostředky, protože s vlastností grid-gap zde neuspějeme.

Živé demo, které je funkční i v IE11: cdpn.io/e/XZbrEY

Ke studiu náhradních řešení pro Explorer a tamní verzi Gridu doporučuji tyhle články:

Podpora v IE11 je bídná, s tím se asi polemizovat nedá. Nicméně pro jednodušší layouty je přítomnost alespoň nějakého Gridu v tomhle starém ale pořád ještě používaném prohlížeči skvělá zpráva. Rozšiřuje to škálu možností náhradních řešení.

Kde se učit?

Než vše detailně připravím pro Vzhůru dolů a e-booky, odkážu vás na jiné zdroje:

Tohle je jen začátek. Grid samozřejmě dále zkoumám, takže nalaďte všechny kanály Vzhůru dolů nebo doražte na školení Dnešní webová kodéřina, kde se mu – kromě jiného – věnuji.

Komentáře