CSS Grid, Flexbox a media queries: nástroje pro responzivní design

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á rozvržení (řádky × sloupce), Flexbox vyniká v jednorozměrných osách (řádek nebo sloupec) a media queries dolaďují chování napříč šířkami, výškami, hustotou pixelů, barevnými režimy a uživatelskými preferencemi. Jejich společné použití umožňuje vytvářet robustní, přístupná a výkonná uživatelská rozhraní 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ě jej rozšiřujte pomocí @media (min-width: …).
Obsah-first: nenastavujte 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) a omezte zbytečné breakpointy.

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

Aktivace: rodičovský prvek s display: grid nebo inline-grid.
Šablona: grid-template-columns a grid-template-rows, např. grid-template-columns: 1fr 2fr 1fr.
Mezery: gap, column-gap, row-gap pro odsazení bez kolizí okrajů.
Umístění položek: grid-column, grid-row nebo deklarativně pomocí grid-template-areas.

Pokročilé jednotky a funkce v Gridu

fr: podíl volného prostoru (např. 2fr = dvojnásobek oproti 1fr).
minmax(min, max): omezení šířky/výšky stopy, např. minmax(16ch, 1fr).
repeat(): generování sloupců/řádků, např. repeat(12, 1fr).
auto-fit vs. auto-fill: automatické vyplňování mřížky kartami; v kombinaci s minmax(…) vytváří fluidní galerie bez breakpointů.
Velikosti podle obsahu: max-content, min-content, fit-content() pro inteligentní přizpůsobení textu a médií.

Implicitní grid, automatické umísťování a vrstvení

Automatické umísťování: grid-auto-flow: row|column|dense určuje, jak se vyplňují volné buňky.
Implicitní stopy: pokud položka přesáhne definici, prohlížeč vytvoří implicitní řádky/sloupce; jejich velikost můžete ovlivnit pomocí grid-auto-rows/grid-auto-columns.
Vrstvení: položky mohou sdílet buňku (pomocí z-index), což umožňuje překrývání (např. odznak 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 zarovnání nadpisů, cen a akčních prvků v kartách umístěných v gridu bez duplikování definic.

Grid-template-areas: deklarativní mapa rozvržení

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

Flexbox: jednorozměrné rozmisťová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 zalamování položek do dalších řádků.
Rozmístění: justify-content (hlavní osa) a align-items (kolmá osa) pro zarovnání; gap pro mezery.
Růst/smršťování: trojice hodnot flex (grow, shrink, basis), např. flex: 1 1 12rem.
Pořadí: order umožňuje změnit pořadí ve vizuálním toku (pozor na přístupnost – pořadí při procházení tabulátorem v DOM zůstává stejné).

Kdy použít Grid a kdy Flexbox

Grid: rozvržení stránek, složité mřížky, karty v řádcích a sloupcích, zarovnání řádků/sloupců, subgrid.
Flexbox: navigace, panely nástrojů, skupiny tlačítek, řádky formulářů, centrování v jedné ose, adaptivní minikarty.
Kombinace: Grid pro makrorozvržení (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) – breakpointy v rem se lépe škálují podle velikosti písma v root elementu.
Hustota pixelů: @media (min-resolution: 2dppx) pro obrázkové podklady HiDPI.
Preferované barevné schéma: @media (prefers-color-scheme: dark) – světlý/tmavý režim.
Preferovaný pohyb: @media (prefers-reduced-motion: reduce) – omezení pohybu a přechodů.
Ukazatel/hover: @media (hover: none) and (pointer: coarse) – větší cíle pro dotyková zařízení.
Orientace: @media (orientation: landscape) – úprava panelů/galerií.

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

Auto-fit s minmax: mřížky přizpůsobující počet sloupců šířce kontejneru (např. karty s minimální šířkou 16rem a maximální šířkou 1fr).
Fluidní typografie: font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem) – vyhlazuje skokové změny velikosti písma.
Flex wrap: řádky štítků se přirozeně zalamují, takže je méně nutné měnit styly v breakpointech.

Container queries: responzivita podle rodiče

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

Praktické vzory rozvržení s Gridem

Rozvržení „Holy Grail“: hlavička a patička pomocí grid-template-areas; postranní panel a obsah se na mobilu skládají pod sebe.
Produktová karta: subgrid pro zarovnání názvu, ceny a výzvy k akci napříč řádky bez ohledu na délku titulku.
Galerie: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) – přirozené využití prostoru bez media queries.

Praktické vzory s Flexboxem

Navigační panel: justify-content: space-between, skupiny položek, sekundární akce zarovnané doprava.
Řádky formuláře: popisek + vstupní pole, svislé zarovnání na střed, zalamování na úzkých obrazovkách.
Karty s patičkou: obsah se roztahuje, tlačítka zůstávají dole díky margin-top: auto na oddělovacím prvku.

Zarovnání a rozložení prostoru

Zarovnání v Gridu: align-items/justify-items pro výchozí zarovnání, align-self/justify-self u položek; place-items jako zkratka.
Zarovnání ve Flexboxu: align-items a align-content (při více řádcích), gap namísto „hacků“ s okraji.

Přístupnost a pořadí obsahu

Logický DOM: vizuální přeuspořádání pomocí order nebo gridu nesmí narušit smysl obsahu při čtení čtečkami obrazovky; pořadí v DOM má přednost.
Fokus: zachovejte přirozený tok; u vysouvacího menu spravujte tabindex a aria-expanded.
Kontrast a dotykové cíle: media queries pro hrubý ukazatel zvětší aktivní plochu a rozestupy.

Výkon a udržitelnost

Minimalizujte překreslování layoutu: omezte složité přepočty rozvržení; upřednostněte deklarativní řešení pomocí gridu/flexu před měřením v JavaScriptu.
Opětovné použití: definujte @layer a rozvržení škálujte pomocí proměnných CSS (např. --gutter, --container).
Škálovatelná typografie: jednotky rem a ch zajistí čitelnost napříč zařízeními.

Testování a ladění

DevTools: překryvné vrstvy pro grid/flex; simulace zařízení, orientací a preferencí (omezení pohybu, tmavý režim).
Okrajové případy: extrémně dlouhá slova, různé jazyky (RTL pomocí direction: rtl), uživatelem zvětšená velikost písma v root elementu.
Snímky: vizuální regresní testy pro různé šířky kontejnerů/viewportů.

Migrace ze starších technik rozvržení

Floats → Flex/Grid: floats ponechte pro obtékání textu; pro rozvržení použijte moderní moduly.
Rozvržení pomocí tabulek: nahraďte gridem kvůli sémantice a přístupnosti; tabulky ponechte jen pro tabulková data.
Frameworky: staré dvanáctisloupcové mřížky lze znovu implementovat čistým gridem pomocí repeat() a minmax().

Bezpečné zhoršení funkčnosti a @supports

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

Kontrolní seznam pro responzivní rozvržení

Začněte přístupem mobile-first, breakpointy definujte v rem.
Upřednostňujte Grid pro makrorozvržení a Flexbox pro mikrorozvržení; kombinujte je.
Upřednostňujte auto-fit/auto-fill s minmax() před velkým množstvím breakpointů.
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), nejen viewport.

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

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