📖
Teorie
CSS Grid je dvourozměrný layout systém vhodný pro složité rozložení stránek. Základ: display:grid; grid-template-columns/rows; gap; grid-area; align/justify.*; fr jednotky. Používejte pro hlavní layout stránky, dashboardy a komplexní mřížky.
🎯
Tahák
- 1display:grid
- 2grid-template-columns: repeat(3, 1fr)
- 3grid-gap (gap)
- 4grid-area pro pojmenované oblasti
❓
Typické otázky u maturity
- 1Kdy použít grid vs. flexbox?
- 2Co je fr jednotka?
🏷️
Klíčová slova
gridtemplate-columnsgaparea
⚡
Praktická část
Zadání:
Sestroj layout s hlavičkou, bočním panelem a hlavním obsahem pomocí CSS Grid.
Kroky:
- 1Definuj grid-template-areas
- 2Přiřaď elementům grid-area
- 3Nastav responsivitu pomocí media queries