Gumový layout: principy tvorby a rozdíl od adaptivního

Co je gumový layout

Gumový layout (liquid layout, fluid layout) — přístup ke kódování, při kterém jsou rozměry prvků nastaveny v relativních jednotkách, nikoli v pevných pixelech. To umožňuje stránce měnit se spolu s oknem prohlížeče bez horizontálního posouvání.

Koncepce elastického kódování vznikla již v éře desktopových monitorů s různým rozlišením. V roce 2000 vypadaly weby s pevnou šířkou 960 pixelů na 15palcových a 30palcových monitorech špatně. Gumový layout tento problém vyřešil.

Podle Web Almanac (2024) používá 78% moderních webů prvky elastického kódování prostřednictvím relativních jednotek. Čistě gumové layouty jsou vzácnější — hlavně v dashboardech a správcovských panelech.

Historický kontext

Elastické kódování se stalo populárním po zveřejnění článku Johna Allsoppa «A Dao of Web Design» v roce 2000, ve kterém vyzýval k opuštění pevných pixelů ve prospěch relativních jednotek. Tento manifest položil filozofický základ pro celý responsivní design.

Relativní měrné jednotky: procenta, vw, vh

Základní relativní jednotky v CSS se dělí do dvou skupin: vůči rodičovskému elementu (procenta) a vůči viewportu (vw, vh, vmin, vmax). Každá skupina řeší své úkoly v elastickém kódování.

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

Procenta se vypočítávají vůči šířce rodičovského kontejneru. Vnořená procenta mohou vytvářet kaskádové výpočty, které někdy dávají neočekávané výsledky. Jednotky vw/vh jsou vázány na viewport a ignorují rodičovské kontejnery — to je vhodné pro celoobrazovkové sekce.

Jednotka rem pro písma

V elastickém kódování je důležité nejen nastavit šířku bloků v relativních jednotkách, ale také velikost písma. Jednotka rem (root em) váže velikost textu na kořenový element HTML. Změnou font-size v html lze měnit veškerý text na stránce.

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

Gumový vs adaptivní layout

Hlavní rozdíl mezi gumovým a adaptivním layoutem je charakter změny šířky. Gumový layout se mění plynule při každé změně okna, zatímco adaptivní — diskrétně pomocí media queries.

Gumový layout — plynulé škálování, adaptivní — přepínání mezi pevnými layouty. Každý přístup má silné a slabé stránky.

V praxi většina moderních webů používá hybridní přístup: elastickou síť s relativními jednotkami + media queries pro kritické breakpointy. Čistě elastické kódování bez media queries může vypadat neupraveně na velmi širokých nebo velmi úzkých obrazovkách.

Jak implementovat elastické kódování v CSS

Základní implementace gumového layoutu zahrnuje tři složky: relativní jednotky šířky, maximální/minimální omezení a flexbox nebo grid pro distribuci prostoru.

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Flexbox přístup s flex: 1 1 30% vytváří karty, které zabírají přibližně 30% šířky kontejneru, ale mohou se zúžit na 250px. Když je karet mnoho, přesunou se na další řádek. Grid přístup s auto-fit a minmax automaticky vytváří sloupce, které se do kontejneru vejdou.

Omezení: min-width a max-width

Klíčový problém čistě elastického kódování — na velmi širokých obrazovkách se řádek textu roztáhne na 2000+ pixelů, což znemožňuje čtení. K řešení se používají CSS vlastnosti min-width, max-width.

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px zabraňuje roztahování obsahu na ultrawide monitorech. min-width: 320px garantuje minimální šířku kontejneru na malých obrazovkách. Kombinace width: 90% + max-width vytváří elastický kontejner se stropem — nejoblíbenější vzor v moderním webdesignu.

Podle HTTP Archive (2025) používá 92% webů v top-1000 max-width pro obsahové bloky. Standardní hodnota pro desktopové layouty je 1140–1200 pixelů.

Hybridní přístup: gumový + adaptivní

Moderní webdesign řídka používá čistě gumový nebo čistě adaptivní přístup. Hybridní metoda kombinuje výhody obou: elastickou síť na relativních jednotkách + media queries pro globální restrukturalizace.

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

Na desktopu layout používá elastické sloupce 1fr a 3fr — poměr zůstává při jakékoli šířce okna. Na mobilu media query přepíná na jednosloupcové schéma, kde jsou sloupce uspořádány vertikálně.

Výhoda hybridního přístupu — vývojář píše méně media queries, protože elastická síť se automaticky přizpůsobí meziproduktům. Media queries jsou potřebné pouze pro kritické změny struktury, ne pro každý krok šířky obrazovky.