Jak vytvoříte rozložení pomocí CSS Grid?

Question

Accepted Answer

**CSS Grid** je dvourozměrný systém rozložení — řídí **řádky a sloupce současně**, na rozdíl od jednoho řádku Flexboxu. V kontejneru definujete mřížku a umístíte do ní prvky.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Jednotka fr a repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("frakce") rozděluje dostupný prostor — `1fr 2fr` jej rozdělí v poměru 1:2. `repeat(3, 1fr)` je zkratka pro tři stejné stopy.

## Responzivní mřížka BEZ mediálních dotazů

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Ten jeden řádek vytváří zcela responzivní mřížku karet: každý sloupec je minimálně `250px`; prohlížeč umístí **co nejvíce jako možné** na řádek a zabalí zbytek — automaticky se mění ze 4 sloupců na desktopu na 1 na mobilu. `auto-fit` + `minmax` je jeden z nejoblíbenějších vzorů Grid.

## Umístění prvků v buňkách

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Prvky mohou přesahovat více řádků/sloupců, což umožňuje rozložení ve stylu magazínu, která jsou u Flexboxu nepohodlná.

## Grid vs Flexbox

- **Grid** — 2D rozložení (řádky *a* sloupce): rozložení stránky, mřížky karet, dashboardy.
- **Flexbox** — 1D rozložení (jeden řádek nebo sloupec): navigační lišty, skupiny tlačítek, vycentrování.

Dobře se skládají — buňka mřížky může být sama o sobě kontejnerem flex.

## Proč je to důležité

Grid je nejsilnější CSS nástroj rozložení — čistě zvládá rozložení celé stránky a responzivní mřížky karet, často nahrazuje vnořené hacky div.

Samotný vzor `auto-fit`/`minmax` responzivní odstraňuje potřebu mnoha mediálních dotazů.