CSS moderní layout

Seznamka – Grid vs. flex (vs. multicol) – Velmi stručná historie layoutů v CSS – Moderní a nemoderní layouty.

Media Queries – Container Queries – No Queries.

Seznam ukázek – Boční panel – Hromada lívanců – Svatý grál – Responzivní fotogalerie – Mřížka jako v Bootstrapu – Centrování boxu – Formulář pro vyhledávání – Galerie bez Media Queries – Krkavčí technika.

Všechny vlastnosti flexboxu – Co je dobré vědět – Flex-wrap – Flex-direction – Flex-flow – Flex-grow – Flex-shrink – Flex-basis – Flex.

Úvod a rozcestník – Vychytávky gridu – Linka, buňka, oblast – Mřížka explicitní a implicitní – Formátovací kontext mřížky – Grid v Internet Exploreru – Grid-template-rows/columns – Grid-template-areas – Grid-template – Grid-auto-rows/columns – Grid-auto-flow – Grid – Grid-row/column – Grid-area – Jednotka fr – Repeat(), auto-fill, auto-fit – Minmax(), fit-content(), max/min-content – Subgrid – Masonry.

Úvod a rozcestník – Column-width, column-count a columns – Column-gap a column-rule – Column-fill – Break-before, break-after a break-inside – Column-span.

Úvod a rozcestník – Nutná teorie – Justify-items – Align-items – Place-items – Justify-self – Align-self – Place-self – Gap – Justify-content – Align-content – Place-content – Order.

Internet Explorer (je už mrtvý?) – Podpora layoutů v prohlížečích – Přístupnost – Rychlost – DevTools.

Vlastnost display – Logické vlastnosti – Jednotky v CSS – Autorské vlastnosti (proměnné) – Funkce calc() – Funkce min(), max() a clamp() – @supports – Autoprefixer.