Vytvoření fluidní mřížky fotografií

Jak navrhnout miniatuní mřížku, která se přizpůsobuje všem velikostem obrazovek bez ztráty proporcí nebo estetiky.

12 min čtení Pokročilý březen 2026

Designer pracuje s grid layoutem galerie na grafickém tabletu s pero a barevnými vzory

Tomáš Novotný

Senior Expert Frontend Design

Senior expert frontend designu s 14 lety zkušeností v tvorbě responzivních galerií a lightbox řešení pro webová portfolia.

Základní principy fluidní mřížky

Fluidní mřížka fotografií není jen o tom, aby se obrázky vešly na obrazovku. Jde o to, aby vypadaly dobře na každé obrazovce — od malého mobilu až po velký monitor. Většina webů to zatím nedělá správně. Obrázky se buď příliš zmenšují, nebo zbývá kolem nich příliš místa.

Klíč je v proporcích. Když nastavíš mřížku správně, všechny fotky zachovávají své původní poměr stran bez oříznání nebo roztažení. To znamená, že portrétní fotografie zůstane portrétní, krajiny zůstanou krajinami. Vypadá to jednoduše, ale je to vlastně docela technická práce.

Prakticky to funguje tak, že počet sloupců v mřížce se mění v závislosti na šířce obrazovky. Na mobilu máš třeba dva sloupce, na tabletu tři a na desktopu čtyři nebo pět. Všechny fotky se pak automaticky přizpůsobí bez toho, aby ses o to musel starat.

CSS Grid vs. Flexbox pro galerie

Máš dvě hlavní možnosti. CSS Grid je výkonnější a přesnější — dává ti plnou kontrolu nad řádky a sloupci. Je to jako práce s tabulkou, kde všechno sedí na správné místo. Ideální, když chceš, aby se některé fotky rozprostíraly přes dva sloupce nebo měly specifickou pozici.

Flexbox je jednodušší a fluidnější. Jednoduše řekneš “zalamuj se na více řádků” a zbylý prostor se automaticky distribuuje. Je to přímočařejší a pro mnohé galerií je to naprosto dostačující. Obě možnosti fungují — záleží na tom, jaký stupeň kontroly potřebuješ.

My tu používáme Grid, protože nám dává více flexibility. Někdy chceme, aby se určitá fotka zvýraznila tím, že bude větší. To s Gridem zvládneš lehce — s Flexboxem je to složitější.

Srovnění CSS Grid a Flexbox layoutu v galerií s různými velikostmi obrázků

Mobilní obrazovka zobrazující galerii fotografií s dvěma sloupci miniatunek

Praktická implementace s breakpointy

Breakpointy jsou důležité. Začni na mobilu — tam chceš minimálně dva sloupce, aby to nevypadalo jako dlouhý seznam. Na tabletu (kolem 768px) se přesuň na tři sloupce. Na desktopu pak běžně používáš čtyři až pět sloupců, záleží na obsahu.

Důležité je, aby přechody mezi breakpointy nebyly náhlé. Fotky by se měly měnit plynule, ne skákat na novou velikost. Můžeš použít CSS clamp() — to automaticky škáluje mezi minimální a maximální velikostí bez potřeby mediálních dotazů. Ušetří ti to spoustu kódu.

Pamatuj, že každá fotka má jiný poměr stran. Některé jsou čtvercové, některé portrétní, některé panorámatické. Tvá mřížka to musí zvládnout bez oříznání. Na to je ideální použít CSS aspect-ratio vlastnost — řekneš jí poměr (třeba 3:2) a ona se o zbytek postará.

Optimalizace a výkon

Galerie s stovkami fotek snadno zpomalí web. Zde přichází na řadu líné načítání. Nechť se obrázky načítají jen když jsou potřeba — když se k nim uživatel posune. Na začátku se načítají jen viditelné fotky, zbylé se připraví, když se k nim dostaneš.

Používáme Intersection Observer API — to je elegantní způsob, jak vědět, kdy je prvek viditelný. Není to složité implementovat a výrazně to zlepší výkon. Tvůj web se bude načítat rychleji a návštěvníci budou spokojeni.

Také si dej pozor na velikost souborů. Obrázky by měly být v moderním formátu jako WebP, ne jen JPEG. WebP je menší bez ztráty kvality. Pokud máš galerii s 200 fotkami v JPEG, může to být snadno 50-80 MB. S WebP to bude 15-25 MB. To je obrovský rozdíl.

Vývojář upravuje kód pro optimalizaci obrázků v editoru s otevřenými DevTools

Pokročilé techniky a detaily

Když máš základy na místě, můžeš přidat detaily. Například gap — prostor mezi fotkami. Na mobilu chceš menší gap (třeba 8px), na desktopu můžeš větší (16px nebo 24px). To udělá galerii vzdušnější a lépe se čte.

Aspect Ratio

Postav si fotografií podle jejich původního poměru bez oříznout či roztažení. CSS aspect-ratio: 3/2 ti to zjednoduší.

Hover Efekty

Přidej subtilní zoom nebo stín, když uživatel najede myší na fotku. To signalizuje, že je to kliknutelné.

Loading States

Zatímco se obrázky načítají, ukaž placeholder barvu nebo blurred placeholder. Vypadá to lépe než bílý prázdný prostor.

Focus Management

Zajisti, aby bylo všechno dostupné i pomocí klávesnice. Focusové stavy jsou důležité pro přístupnost.

Prakticky se jedná o to, že cada detail počítá. Malé animace a interakce dělají galerii živou. Ale nezapomínej — výkon vždy vítězí nad animacemi. Raději mít hladkou galerii bez zbytečných efektů než pomalou galerii s přebytkem animací.

Poznámka o implementaci

Tato příručka poskytuje obecné pokyny a osvědčené postupy pro vytváření fluidních galerií. Konkrétní implementace se liší v závislosti na technologickém stacku, kompatibilitě prohlížečů a specifických požadavcích projektu. Vždy testuj svou galerii na reálných zařízeních a různých velikostech obrazovek. Výkon a přístupnost jsou klíčové faktory, které nesmíš přehlédnout.

Shrnutí

Fluidní mřížka fotografií je dovednost, která se vyplatí zvládnout. Není to jen o CSS — je to o pochopení, jak fungují proporce, jak se obsah přizpůsobuje různým zařízením a jak se stará o výkon. Když to zvládneš, tvoje galerie budou vypadat profesionálně na každé obrazovce.

Začni jednoduše. Postav základní mřížku, přidej breakpointy, otestuj na mobilu. Pak postupně přidávej detaily — líné načítání, hover efekty, lepší načítání. Každý krok tě posune vpřed. Neboj se experimentovat a dělat chyby — to je součást procesu.