# 12 - CSS Grid Layout

## 🎯 Co se naučíte

V této lekci se naučíte vytvářet komplexní dvourozměrné layouty pomocí CSS Grid.

## 📚 Témata lekce

- **CSS Grid základy** - `display: grid`
- **Grid container** vlastnosti:
  - `grid-template-columns` (definice sloupců)
  - `grid-template-rows` (definice řádků)
  - `gap`, `column-gap`, `row-gap` (mezery)
  - `grid-template-areas` (pojmenované oblasti)
- **Grid items** vlastnosti:
  - `grid-column`, `grid-row` (umístění položky)
  - `grid-area` (pojmenovaná oblast)
- **Responzivní Grid** - kombinace s media queries
- **Galerie** - praktické použití Gridu

## 📂 Soubory v projektu

- `index.html` - HTML s grid strukturou
- `style.css` - CSS s grid definicemi

## 💻 Ukázka z lekce

```css
/* Grid container - galerie */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 stejně široké sloupce */
    gap: 20px;  /* mezery mezi položkami */
}

/* Grid items */
.grid-item {
    background-color: lightblue;
    padding: 20px;
}

/* První položka zabere 2 sloupce */
.grid-item:first-child {
    grid-column: span 2;
}

/* Responzivní Grid */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);  /* 2 sloupce na tabletu */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;  /* 1 sloupec na mobilu */
    }
}
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Otevřete **Developer Tools** (F12) a vyberte grid element
3. V Chrome DevTools najdete **Grid** badge - klikněte pro vizualizaci mřížky
4. Prozkoumejte `style.css` - jak funguje `display: grid`
5. Zkuste měnit počet sloupců: `grid-template-columns: repeat(4, 1fr)`
6. Experimentujte s `gap`, `grid-column`, `grid-row`
7. Změňte velikost okna a sledujte responzivitu

## 💡 Tip pro studenty

### Kdy použít Grid:
- ✅ Komplexní dvourozměrné layouty (řádky + sloupce)
- ✅ Galerie obrázků
- ✅ Celostránkové layouty (header, sidebar, main, footer)
- ✅ Dashboardy, karty v mřížce
- ✅ Kalendáře

### Kdy raději Flexbox:
- ❌ Jednosměrné layouty (jen řádek nebo jen sloupec)
- ❌ Navigační menu
- ❌ Jednoduchá centrování

### Hlavní jednotky:
- **fr** (fraction) = podíl dostupného prostoru
  - `1fr 2fr` = první sloupec 1/3, druhý 2/3
- **px** = pevná velikost
- **%** = procenta z containeru
- **auto** = automatická velikost podle obsahu

### Grid layout pattern:
```css
/* Kontejner */
.grid-container {
    display: grid;  /* MUSÍ BÝT! */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Položky se umístí automaticky */
.grid-item {
    /* žádné speciální vlastnosti potřeba */
}
```

## 🎯 Praktické příklady

**Galerie 3 sloupce:**
```css
.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
```

**Responzivní galerie (bez media queries!):**
```css
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
```

**Layout stránky:**
```css
.layout {
    display: grid;
    grid-template-columns: 250px 1fr;  /* sidebar + main */
    grid-template-rows: 80px 1fr 60px;  /* header + content + footer */
    gap: 10px;
    height: 100vh;
}
```

## ⚠️ Důležité poznámky

1. **display: grid musí být na KONTEJNERU**, ne na položkách!
2. **Grid položky** = pouze přímé děti grid containeru
3. Použijte **Chrome DevTools Grid inspector** pro debugování
4. **repeat()** funkce šetří psaní: `repeat(3, 1fr)` = `1fr 1fr 1fr`

## 🔗 Související lekce

- **Předchozí:** 11_json - práce s JSON
- **Další:** 13_bootstrap_intro - úvod do Bootstrapu
- **Porovnání:** 10_flex - Flexbox (jednosměrný layout)
- **Praktický projekt:** AI_extra_material/ai_01_grid_responsive - kompletní Grid projekt s responzivitou