CSS grid: mřížka v kostce

Praktické video postavené na živém kódování, kde se naučíte nebo si osvěžíte základní i pokročilejší vlastnosti CSS gridu.
Ačkoliv je CSS grid v řadě případů výhodnější, frontendisti často zbytečně ohýbají jiné metody pro rozvržení prvků, jako je flexbox.
Na příkladech uvidíte, jak skvělým nástrojem CSS grid je. Vy zkušenější si možná připomente leckeré návrhové principy, které jste při seznamování s gridem minuli.
Grid vs. flexbox (**2:16**)
Příklad: karta produktu (**8:35**) (CodePen: [zadání](codepen.io/mac..., [řešení v gridu](codepen.io/mac...)
Internet Explorer (**24:25**) (CodePen: [výsledek s `grid-areas`](codepen.io/mac...)
Příklad: fotogalerie (**36:30**) (CodePen: [zadání](codepen.io/mac..., [výsledek](codepen.io/mac...)
Pokročilejší příklady (**47:10**) (CodePen zadání: [Bootstrap](codepen.io/mac..., [min/max](codepen.io/mac..., [autofit/autofill](codepen.io/mac..., [přístupnost - `order`](codepen.io/mac...)
[Prezentace v PDF](www.dropbox.co...)
[Vzhůru dolů: Příručka k CSS gridu](www.vzhurudolu...)
[Vzhůru dolů: Příručka k CSS Box Alignment](www.vzhurudolu...)
Lektor: Martin Michálek, www.vzhurudolu...
Kniha: www.vzhurudolu...