CSS Grid, Flexbox a media queries

Proč Grid, Flexbox a media queries tvoří základ responzivity

Responzivní design stojí na schopnosti rozvrhnout obsah podle dostupného prostoru a kontextu zařízení. CSS Grid řeší dvourozměrné layouty (řádky × sloupce), Flexbox exceluje v jednorozměrných osách (řádek nebo sloupec) a media queries dolaďují chování napříč šířkami, výškami, hustotou pixelů, režimem barev a uživatelskými preferencemi. Jejich společné použití umožňuje tvořit robustní, přístupné a výkonné UI bez zbytečného JavaScriptu.

Strategie návrhu: mobile-first, obsah-first a intrinsic layout

• Mobile-first: začněte minimálním stylem pro úzké viewporty a postupně rozšiřujte pomocí @media (min-width: …).
• Obsah-first: nefixujte pevné rozměry; využijte minmax(), auto, procenta, fr a fluidní typografii clamp().
• Intrinsic layout: nechte prvek růst podle obsahu (např. max-content, min-content), omezte zbytečné breakpointy.

CSS Grid: základy dvourozměrného rozvržení

• Aktivace: rodič s display: grid nebo inline-grid.
• Šablona: grid-template-columns a grid-template-rows, např. grid-template-columns: 1fr 2fr 1fr.
• Gaps: gap, column-gap, row-gap pro odsazení bez margin kolizí.
• Umístění položek: grid-column, grid-row, nebo deklarativně přes grid-template-areas.

Pokročilé jednotky a funkce v Gridu

• fr: podíl volného prostoru (např. 2fr = dvojnásobek vůči 1fr).
• minmax(min, max): omezení šířky/height tracku, např. minmax(16ch, 1fr).
• repeat(): generování sloupců/řádků, např. repeat(12, 1fr).
• auto-fit vs. auto-fill: automatické zalévání mřížky kartami; s minmax(…) vytváří fluidní galerie bez breakpointů.
• Obsahové velikosti: max-content, min-content, fit-content() pro inteligentní přizpůsobení textu a médií.

Implicitní grid, auto-umísťování a vrstvení

• Auto-placement: grid-auto-flow: row|column|dense řídí plnění volných buněk.
• Implicitní tracky: pokud položka přesáhne definici, prohlížeč vytvoří implicitní řádky/sloupce; ovlivníte grid-auto-rows/grid-auto-columns.
• Vrstvení: položky mohou sdílet buňku (pomocí z-index), což dovoluje překryvy (např. badge přes kartu).

Subgrid: konzistentní zarovnání napříč vnořenými prvky

Subgrid umožňuje potomkům dědit rozvržení řádků/sloupců rodiče (grid-template-columns: subgrid). Usnadňuje zarovnat nadpisy, ceny a akční prvky v kartách umístěných v gridu bez duplikace definic.

Grid-template-areas: deklarativní mapa layoutu

Pro komplexní rozvržení můžete pojmenovat oblasti a při různých šířkách je přeskupovat. Příklad: hlavička, sidebar, obsah a patička se v mobilu skládají pod sebe, na desktopu do dvou sloupců – stačí změnit řetězce oblastí v media query, nikoli HTML.

Flexbox: jednorozměrné rozkládání a zarovnání

• Aktivace: display: flex nebo inline-flex.
• Osa: flex-direction: row|row-reverse|column|column-reverse.
• Zalamování: flex-wrap: wrap pro přelamování položek na další řádky.
• Distribuce: justify-content (hlavní osa) a align-items (kolmá osa) pro zarovnání; gap pro mezery.
• Růst/útlum: flex trojice (grow, shrink, basis), např. flex: 1 1 12rem.
• Objednání: order umožňuje změnit pořadí ve vizuálním toku (pozor na přístupnost – tab pořadí v DOM zůstává).

Kdy Grid a kdy Flexbox

• Grid: rozvrh stránek, složité mřížky, karty v řádcích a sloupcích, shody řádků/kolonek, subgrid.
• Flexbox: navigace, toolbary, tlačítkové skupiny, formulářové řádky, centrování v jedné ose, adaptivní minikarty.
• Kombinace: Grid pro makrolayout (sekce) a Flexbox uvnitř komponent (zarovnání ikon, textů a tlačítek).

Media queries: breakpointy a uživatelské preference

• Šířka/ výška viewportu: @media (min-width: 48rem), @media (max-width: 80rem) – rem breakpointy lépe škálují s root font-size.
• Hustota pixelů: @media (min-resolution: 2dppx) pro HiDPI assets.
• Preferovaná barevnost: @media (prefers-color-scheme: dark) – světlý/tmavý režim.
• Preferované animace: @media (prefers-reduced-motion: reduce) – omezit pohyb a přechody.
• Ukazatel/hover: @media (hover: none) and (pointer: coarse) – větší cíle na touch zařízeních.
• Orientace: @media (orientation: landscape) – úprava panelů/galerií.

Techniky bez breakpointů: auto-fit, minmax a clamp

• Auto-fit s minmax: mřížky adaptující počet sloupců podle šířky kontejneru (např. karty min. 16rem, max. 1fr).
• Fluidní typografie: font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem) – vyhladí skoky písma.
• Flex wrap: řádky štítků se přirozeně zalamují; méně nutnosti měnit styl v breakpointech.

Container queries: responzivita podle rodiče

Namísto šířky viewportu reaguje komponenta na vlastní kontejner. Aktivace: rodič s container-type: inline-size, poté @container (min-width: 30rem) { … }. Umožňuje skládat opakovaně použitelné komponenty bez globálních breakpointů.

Praktické vzory rozvržení s Gridem

• „Holy Grail“ layout: hlavička, patička přes grid-template-areas; sidebar/obsah se v mobilu skládá pod sebe.
• Produktová karta: subgrid pro zarovnání názvu, ceny a CTA napříč řádky bez ohledu na délku titulku.
• Galerie: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) – přirozené zabírání prostoru bez media queries.

Praktické vzory s Flexboxem

• Navbar: justify-content: space-between, skupiny položek, sekundární akce zarovnané doprava.
• Form řádky: label + input, svislé zarovnání středem, wrap na úzkých obrazovkách.
• Karty s footery: obsah roste, tlačítka dole díky margin-top: auto na spaceru.

Zarovnání a rozložení prostoru

• Grid Align: align-items/justify-items pro implicitní zarovnání, align-self/justify-self na položkách; place-items pro zkratku.
• Flex Align: align-items a align-content (při více řádcích), gap namísto margin „hacků“.

Přístupnost a pořadí obsahu

• Logický DOM: vizuální přeuspořádání pomocí order nebo gridu nesmí zlomit smysl čtený čtečkami; DOM pořadí má přednost.
• Fokus: zachovejte přirozený tok; u off-canvas menu spravujte tabindex a aria-expanded.
• Kontrast a touch cíle: media queries pro coarse pointer zvětší hit-area a spacing.

Výkon a udržitelnost

• Minimalizujte reflow: složité přepočty layoutu omezte; dejte přednost deklarativním grid/flex řešením před JS měřením.
• Reuse: definujte @layer a škálujte pomocí CSS proměnných (např. --gutter, --container).
• Škálovatelná typografie: rem a ch zajistí čitelnost napříč zařízeními.

Testování a ladění

• DevTools: overlay pro grid/flex; simulace zařízení, orientací a preferencí (reduced-motion, dark mode).
• Edge případy: extrémně dlouhá slova, různé jazyky (RTL s direction: rtl), zvětšený root font-size uživatelem.
• Snapshoty: vizuální regresní testy pro různé šířky kontejnerů/viewportů.

Migrace ze starších layout technik

• Floats → Flex/Grid: floats ponechte pro text obtékání; pro layout použijte moderní moduly.
• Table-layout: nahraďte gridem pro semantiku a přístupnost; tabulky ponechte jen pro tabulární data.
• Frameworky: staré 12-sloupcové mřížky lze reimplementovat čistým gridem s repeat() a minmax().

Bezpečná degradace a @supports

Pro částečnou kompatibilitu využijte @supports (display: grid) k zapnutí moderního layoutu, jinak ponechte funkční flex/floats fallback. Přístup „progressive enhancement“ zajistí použitelnost i ve starších prohlížečích.

Checklist pro responzivní layouty

• Začněte mobile-first, breakpointy definujte v rem.
• Upřednostněte Grid pro makro, Flex pro mikro layouty; kombinujte je.
• Preferujte auto-fit/auto-fill s minmax() před mnoha breakpointy.
• Využijte clamp() pro fluidní typografii a mezery (margin/gap).
• Respektujte prefers-reduced-motion a prefers-color-scheme.
• Testujte různé šířky kontejnerů (container queries), ne jen viewport.

Závěr: kompozice nástrojů namísto „magických“ breakpointů

Moderní responzivní design je o kompozici: dvourozměrný Grid pro strukturu, jednorozměrný Flexbox pro vnitřní zarovnání a kontextové media/container queries pro jemné doladění a preference uživatele. Důraz na intrinsic rozměry, fluidní jednotky a progresivní vylepšování snižuje počet breakpointů, zlepšuje výkon a udržitelnost kódu – výsledkem jsou rozhraní, která se sama přizpůsobují obsahu i zařízení.