Martin Michálek Martin Michálek  – 2. 8. 2019

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.

Pokud sháníte kompletní příručku ke všem vlastnostem gridu, jste na správném místě. V tomto textu vás čeká:

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.

Definice mřížky

Následujícími vlastnostmi je možné definovat kostru rozvržení.

grid-template

CSS vlastnost grid-template

Zkratka pro definici explicitní mřížky.
grid-template:"one one two" 1fr ⏎ "one one two" 1fr / 1fr 1fr 1fr;

grid-auto-flow

CSS vlastnost grid-auto-flow

Způsob automatického umísťování do mřížky.
grid-auto-flow:column;

grid

CSS zkratka grid

Zkratka pro definici všeho.
grid:auto-flow 1fr / 100px;

Vysvětlivka: Symbol značí, že v běžném kódu je potřeba odsadit pomocí klávesy Enter.

Umístění do mřížky

grid-column/row

CSS vlastnost grid-column/row

Umístění do explicitní mřížky.
grid-column:2 / 3;

grid-area

CSS vlastnost grid-area

Umístění do pojmenované oblasti.
grid-area:first;

Funkce a klíčová slova

Do následující škatulky spadly nejrůznější výpočetní funkce, speciální klíčová slova a jednotky, které vznikly pro potřeby gridu:

jednotka fr

CSS jednotka fr

Jednotka pro podíl na celku.
grid-template-columns:1fr 2fr;

funkce minmax()

CSS funkce minmax()

Omezení minima a maxima v rozměru.
grid-template-columns:minmax(100px,1fr);

Vlastnosti, které zatím nemají plnou podporu

Následující dvě nové vlastnosti sice zatím není možné snadno použít v praxi, ale vypadá to nadějně a ke všemu je považuji za velmi užitečné:

subgrid

CSS masonry laoyut

Podmřížka uvnitř mřížky.
grid-template-cols:subgrid;

masonry

CSS masonry laoyut

Masonry (zděný) layout.
grid-template-rows:masonry;

Zarovnávání (CSS Box Alignment)

Ke správnému zarovnávání v gridu budete potřebova také vlastnosti jako gap, justify-items, align-self a mnohé další. Ty jsou součástí samostatné příručky.

Související: Zarovnání boxů v CSS (Box Alignment Module) – Materiál k vlastnostem pro zarovnání boxů.

Základy gridu a první příklad

Nejprve pojďme na představovací video. Podívejte se na video „CSS grid“.

YouTube: youtu.be/9M5RGjlAkeY

Ř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á.

O podpoře moderních systémů layoutu v prohlížečích píšu ve zvláštním textu, ale u gridu není v kontextu moderních prohlížečů téměř o čem psát.

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ší.

Kde se učit?

Podívejte se na tyto zdroje:

Kam pokračovat na Vzhůru dolů? Běžte se podívat ještě na 3 příklady použití gridu i s vysvětlením v kódu.