3I_WTL_2025/AI_extra_material/ai_01_grid_responsive

AI 01 - CSS Grid & Responzivní Layout

🎯 Cíl projektu

Naučit se pracovat s CSS Grid systémem a pokročilými CSS selektory, které jsou důležité pro pochopení Bootstrap grid systému.

📋 Co se naučíte

• CSS Grid základy - display: grid, grid-template-columns
• Grid gaps - mezery mezi položkami
• Responzivní grid s media queries
• Pokročilé CSS selektory - :nth-child(), :first-child, :last-child
• CSS transformace - scale() při hover
• Grid template areas - pojmenované oblasti

📂 Soubory v projektu

• ZADANI.md - detailní zadání projektu s požadavky
• index.html - startovací HTML soubor (s TODO komentáři pro vás)
• style.css - CSS šablona (s TODO komentáři)
• reseni.html - kompletní řešení (podívejte se, když zaseknete)
• reseni.css - CSS s podrobnými komentáři vysvětlující každý řádek

🚀 Jak pracovat s projektem

Krok 1: Přečtěte si ZADANI.md

• Otevřete ZADANI.md a přečtěte si celé zadání
• Pochopte, co máte vytvořit
• Prohlédněte si ukázky kódu

Krok 2: Začněte s index.html a style.css

• Otevřete index.html a style.css
• Najděte TODO komentáře - to jsou místa, kde máte psát kód
• Postupujte podle TODO instrukcí

Krok 3: Testujte responzivitu

1. Otevřete index.html v prohlížeči
2. Otevřete Developer Tools (F12)
3. Zapněte Device Toolbar (Ctrl+Shift+M)
4. Testujte různé velikosti:
   • Desktop (> 768px) - 3 sloupce
   • Tablet (768px) - 2 sloupce
   • Mobil (480px) - 1 sloupec

Krok 4: Když se zaseknete

• Podívejte se do reseni.css - jsou tam podrobné komentáře
• Zkuste pochopit PROČ to funguje, ne jen zkopírovat
• Porovnejte své řešení s hotovým

💡 Klíčové koncepty

CSS Grid pattern:

/* Kontejner */
.grid-container {
    display: grid;  /* MUSÍ BÝT! */
    grid-template-columns: repeat(3, 1fr);  /* 3 sloupce */
    gap: 20px;  /* mezery */
}

/* Položky se umístí automaticky */
.grid-item {
    background-color: lightblue;
    padding: 20px;
}

Responzivní breakpointy:

/* Desktop (výchozí) - 3 sloupce */
.grid-container {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

Pokročilé selektory:

/* Liché položky (1, 3, 5, ...) */
.grid-item:nth-child(odd) {
    background-color: lightblue;
}

/* Sudé položky (2, 4, 6, ...) */
.grid-item:nth-child(even) {
    background-color: lightgreen;
}

/* První položka */
.grid-item:first-child {
    background-color: gold;
}

/* Poslední položka */
.grid-item:last-child {
    background-color: pink;
}

/* Hover efekt */
.grid-item:hover {
    transform: scale(1.05);  /* zvětší o 5% */
    cursor: pointer;
}

⚠️ Časté chyby

❌ Grid nefunguje → Zapomněli jste display: grid na kontejneru

❌ Responzivita nefunguje → Chybí <meta name="viewport"> v <head>

❌ nth-child nefunguje → Zkontrolujte syntax: :nth-child(odd) ne .nth-child(odd)

❌ Gap nefunguje → gap funguje pouze v grid/flex containeru

🎓 Hodnocení (10 bodů)

• HTML struktura (2b) - správná struktura, 9+ položek
• CSS Grid implementace (3b) - grid-template-columns, gap
• Media queries (2b) - 3 breakpointy (desktop, tablet, mobil)
• Pokročilé selektory (2b) - nth-child, first/last-child, hover
• Responzivita (1b) - funguje na všech zařízeních

🔗 Užitečné odkazy

• CSS Grid Guide - CSS Tricks
• nth-child selector - MDN
• CSS Transform - MDN

⏱️ Odhadovaný čas

45-60 minut

🎯 Po dokončení

Po dokončení tohoto projektu budete rozumět:

• Jak funguje CSS Grid (základ pro Bootstrap grid)
• Jak vytvořit responzivní layout bez frameworku
• Pokročilé CSS selektory

➡️ Další projekt: AI 02 - Sémantické HTML5 & CSS Positioning