CSS Grid, řádky a sloupce, rozmístění oblastí
Formát: 30 min praktická úloha, 15 min obhajoba + teorie. Teorie tak komplexní, že z ní dáš i praktiku, plus celá úloha s řešením a bonusy.
CSS Grid Layout je dvourozměrný layout systém v CSS. Rozmísťuje prvky současně po řádcích a sloupcích. Dává naprostou kontrolu nad mřížkou stránky.
| Éra | Technika |
|---|---|
| 90. léta | <table> (sémanticky špatně) |
| 2000-2010 | float, position: absolute |
| 2010-2015 | display: inline-block |
| 2015+ | Flexbox (1D) |
| 2017+ | CSS Grid (2D) |
CSS Grid byl finalizován jako W3C standard v roce 2017. Dnes funguje úplně všude ve všech moderních prohlížečích bez prefixů.
Grid vs Flexbox: Flexbox = 1D, Grid = 2D. Grid pro velký layout, Flexbox pro menší komponenty uvnitř.