CSS Grid: Kompletní příručka všech vlastností (s příklady)

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

Síla gridu je kromě jiného v tom, že jej můžeme definovat jako mřížku v obou směrech – v řádcích i sloupcích. Na rozdíl od flexboxu tedy může být vhodnější pro celostránkové a komplexnější layouty.

Grid zvládají všechny dnešní prohlížeče. Internet Explorer 11 ale podporuje jen starší verzi specifikace CSS gridu. Nevadí, za prvé již téměř vymřel a za druhé – i v něm je možné mřížku s kompromisy použít.

Příručka k vlastnostem

Následuje detailní příručka k jednotlivým vlastnostem CSS gridu.

Nastavení rodiče mřížky

Hodnota vlastnosti display:grid nastaví „grid formatting context“.

Můžete také nastavit „inline“ hodnotu: inline-grid. To je věc podobná inline-block, tedy uvnitř je možné dělat rozvržení, zde pomocí gridu, zvenčí jde o součást řádku textu.

Základy gridu a první příklad

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

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

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

.container {
  display: grid;
}

Toto – na rozdíl od display:flex – samo od sebe nic nedělá. Zatím jsme definovali mřížku, takže máme smůlu. Vzhůru do ní:

@media screen and (min-width: 37.5em) {
  .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) má tři pětiny.

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

.container {
  gap: 0.5em;
}

Po představení všech vlastností a rychlém příkladu bych se rád pozastavil u teoretických konceptů CSS gridu.

Co je to vlastně mřížka?

• Nic nového. Do pravidelné mřížky se už staletí sází velká část knížek, novin a tiskovin obecně.
• Webařským 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 liší grid od flexboxu?

Předně chci zdůraznit, že grid nenahrazuje flexbox. Potřebujete obojí. Naučte se obojí. Ale nějaké rozdíly zde jsou:

• 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 layout „grid in“, kdy se obsah musí vždy přizpůsobit mřížce. Flexbox je super na situace „content out“, kdy se layout musí přizpůsobit obsahu.
• Grid může být také silnější v responzivním designu. Budete potřebovat méně Media Queries, protože obsahuje funkcionalitu jako automatický layout, funkce jako minmax(), repeat() nebo klíčová slova jako auto-fill.
• Grid považuji celkově za robustnější. Jak možná sami vidíte, ve specifikaci gridu je daleko více vlastností než ve flexboxu. Je to i vidět u vlastností zarovnávání boxů (CSS Box Alignment) – těch, které jsou navázané na mřížku, je více než těch, které jsou navázané na flexbox.

Z mého pohledu má grid daleko širší možnosti stylování než při využití flexboxu. Svedeme v něm i dříve těžce kódovatelné layouty.

Podpora

Podpora gridu v moderních prohlížečích je výborná, takřka bezchybná.

Horší je to ve stařičkém prohlížeči od Microsoftu.

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, a takhle bychom mohli pokračovat.

Naštěstí je tady Autoprefixer a dnes už je možné svěřit řešení gridu pro MSIE jemu.

Existence „explorerového“ gridu nám ale v mnoha případech umožní mřížku vcelku bez problémů používat i bez Autoprefixeru. Jen je potřeba se kromě základních vlastností dnešního gridu naučit i ten starší.