3I_WTL_2025/12_grid

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

/* 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:

/* 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:

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

Responzivní galerie (bez media queries!):

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

Layout stránky:

.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