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 definovat 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 mřížku s kompromisy možné 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“. Možná je také „inline“ hodnota: inline-grid.

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;

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

grid-area

CSS vlastnost grid-area

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

Funkce a klíčová clova

Aktuálně píšu texty příruček k dalším vlastnostem. Některé nechávám zatím s odkazem na anglické zdroje:

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);

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 příklad

Nejprve pojďme na představovací video.

Video: CSS grid

Úplné základy ve videu.

A teď ten 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 – automaticky nic nedělá. Zatím jsme definovali mřížku, takže máme smůlu. 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.

Zbývá doladit nějaké ty mezery mezi buňkami mřížky. V gridu pro ty potřeby máme 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, dnes i 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 grid liší 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 „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.
  • Grid může být také silnější v responzivním designu. Budete potřebovat méně Media Queries, protože obsahuje funkcionalitu jako je 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ž flexboxem. Můžeme v něm udělat 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íšeme 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, mohli bychom pokračovat.

Naštěstí je tady Autoprefixer a dnes už je možné svěřit řešení gridu pro IE 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.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?