CSS Grid – rozvržení stránky

Základní použití

Grid aktivuješ stejně jako Flexbox – vlastností display: grid na rodičovském prvku. Poté definuješ sloupce pomocí grid-template-columns:

/* CSS */
.mrizka {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* tři sloupce po 200px */
  gap: 20px;                                /* mezera mezi buňkami */
}

<!-- HTML -->
<div class="mrizka">
  <div>Buňka 1</div>
  <div>Buňka 2</div>
  <div>Buňka 3</div>
  <div>Buňka 4</div>
  <div>Buňka 5</div>
  <div>Buňka 6</div>
</div>

Potomci se automaticky rozmístí do mřížky – tři do prvního řádku, tři do druhého.

Jednotka fr – zlomek dostupného prostoru

Místo pevných pixelů lze použít jednotku fr (fraction – zlomek). Je to klíč k flexibilním mřížkám:

/* Tři stejně široké sloupce */
grid-template-columns: 1fr 1fr 1fr;

/* Sidebar + hlavní obsah: sidebar má 250px, obsah zabere zbytek */
grid-template-columns: 250px 1fr;

/* Dvě kolony: druhá je dvakrát širší než první */
grid-template-columns: 1fr 2fr;

Zkratka repeat()

Místo opakování stejné hodnoty lze použít funkci repeat():

/* Těchto dvě zápisy jsou ekvivalentní */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

Kombinace repeat() s hodnotou auto-fill nebo auto-fit a funkcí minmax() vytvoří responzivní mřížku bez media queries – počet sloupců se přizpůsobí šířce obrazovky automaticky:

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Tento kód říká: „Vytvoř tolik sloupců, kolik se vejde, přičemž každý musí mít alespoň 200px a nejvýše celý dostupný prostor.\“ Na velkém monitoru vznikne pět sloupců, na telefonu jeden.

Řádky a mezery

Podobně jako sloupce lze definovat i výšku řádků pomocí grid-template-rows. Vlastnost gap nastavuje mezery – buď pro oba směry najednou, nebo zvlášť:

.mrizka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;  /* první řádek 100px, druhý 200px */
  column-gap: 20px;                 /* mezera mezi sloupci */
  row-gap: 10px;                    /* mezera mezi řádky */
  /* nebo zkráceně: gap: 10px 20px; (řádky sloupce) */
}

Umístění prvku v mřížce

Každý potomek lze umístit přesně – říct mu, od kterého sloupce do kterého má sahat. Čísla čar začínají od 1:

.hlavni-obsah {
  grid-column: 2 / 4; /* od 2. čáry do 4. čáry = zabere 2. a 3. sloupec */
  grid-row: 1 / 3;    /* od 1. čáry do 3. čáry = zabere 1. a 2. řádek */
}

/* Zkratka: span říká „přes N buněk“ */
.hlavni-obsah {
  grid-column: 2 / span 2; /* začne na 2. sloupci, zabere 2 sloupce */
}

Typický layout stránky pomocí Gridu

Grid se výborně hodí pro celkový layout stránky. Pomocí vlastnosti grid-template-areas lze definovat oblasti pojmenovaně, což je velmi čitelné:

.stranka {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Grid vs. Flexbox – kdy co použít?

• Flexbox – pro rozvržení prvků v jednom směru: řádek tlačítek, navigaci, kartu s ikonou a textem vedle sebe.
• Grid – pro dvourozměrné rozvržení: celkový layout stránky, fotogalerie, mřížka produktů, formuláře se zarovnanými poli.

Nejsou alternativy – jsou to komplementární nástroje. Na jedné stránce klidně použij oba: Grid pro celkové rozvržení, Flexbox pro dílčí komponenty uvnitř.

Tip od Zdeňka

Zdeněk radí: Na tomto webu používám Grid pro layout kontejneru se dvěma sloupci – hlavní obsah vlevo a navigační panel vpravo. Jeden řádek CSS (display: grid; grid-template-columns: 1fr 300px;) nahradil dřívější komplikované absolutní pozicování. Grid je přímočarý a výsledek je čistší jak v kódu, tak na obrazovce. Pokud tě děsí složité příklady, začni od té nejjednodušší věci: display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; – tři stejné sloupce, mezera, hotovo.