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

Naposledy upraveno: 2. 8. 2019 – 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.

Grid zvládají všechny dnešní prohlížeče. Internet Exploreru 11 ale podporuje jen starší verzi Gridu. Nevadí, 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

Podívejte se na detailní příručku k jednotlivým vlastnostem gridu.

Nastavení rodiče mřížky

display: grid. Nastaví „grid formatting context“, takže jeho přímí potomkové mohou mít specifické vlastnosti. Možná je také „inline“ hodnota: inline-grid.

Definice mřížky

Pod názvem vlastnosti se skrývá samostatný text s příklady.

Vlastnost Co umí?
grid-template-columns/rows Definice explicitní mřížky
grid-template-columns: 150px 1fr 1fr
grid-template-areas Pojmenování oblastí
grid-template-areas: "first first"
grid-template Zkratka pro definici explicitní mřížky
grid-template: auto auto / 2fr 1fr
grid-auto-columns/rows Definice implicitní mřížky
grid-auto-rows: 1fr
grid-auto-flow Způsob automatického umísťování do mřížky
grid-auto-flow: column
grid Zkratka pro definici všeho
grid: auto-flow 1fr / 100px
gap Definice mezery mezi buňkami
gap: 1rem

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

Vlastnost Co umí?
grid-column/row Umístění do explicitní mřížky
grid-column: 2 / 3
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:

Vlastnost Co umí?
jednotka fr Jednotka pro podíl na celku
grid-template-columns: 1fr 2fr
funkce repeat(), auto-fillauto-fit Funkce zkrácení opakujících se zápisů
grid-template-columns: repeat(4, 1fr)
funkce minmax() Omezení minima a maxima v rozměru
grid-template-columns: minmax(100px, 1fr)

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="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: 0.5em;
}

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

  • 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á: IE 11 podporuje jen starší verzi Gridu, která zdaleka neodpovídá variantě podporované v moderních prohlížečích. caniuse.com/grid Ale jak už z článku víte, tohle se dá částečně řešit.

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

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

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.

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:

Běžte se podívat ještě na 3 příklady použití Gridu i s vysvětlením v kódu.

Komentáře