Гумовий макет: принципи побудови та відмінність від адаптивного

Що таке гумовий макет

Гумовий макет (liquid layout, fluid layout) — підхід до верстки, при якому розміри елементів задаються у відносних одиницях, а не у фіксованих пікселях. Це дозволяє сторінці масштабуватися разом із вікном браузера без горизонтальної прокрутки.

Концепція гумової верстки виникла ще в епоху десктопних моніторів з різною роздільною здатністю. У 2000-х роках сайти з фіксованою шириною 960 пікселів погано виглядали на 15-дюймових та 30-дюймових моніторах. Гумовий макет вирішив цю проблему.

За даними Web Almanac (2024), 78% сучасних сайтів використовують елементи гумової верстки через відносні одиниці. Чисто гумові макети зустрічаються рідше — в основному в дашбордах і панелях керування.

Історичний контекст

Гумова верстка стала популярною після виходу статті Джона Оллсоппа «A Dao of Web Design» у 2000 році, де він закликав відмовитися від фіксованих пікселів на користь відносних одиниць. Цей маніфест заклав філософську основу для всього респонсив-дизайну.

Відносні одиниці вимірювання: відсотки, vw, vh

Основні відносні одиниці у CSS поділяються на дві групи: відносно батьківського елемента (відсотки) та відносно viewport (vw, vh, vmin, vmax). Кожна група вирішує свої завдання в гумовій верстці.

/* 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;
}

Відсотки обчислюються відносно ширини батьківського контейнера. Вкладені відсотки можуть створювати каскадні розрахунки, які іноді дають несподівані результати. Одиниці vw/vh прив'язані до viewport та ігнорують батьківські контейнери — це зручно для повноекранних секцій.

Одиниця rem для шрифтів

У гумовій верстці важливо не тільки задавати ширину блоків у відносних одиницях, але й розмір шрифту. Одиниця rem (root em) прив'язує розмір тексту до кореневого елемента HTML. Змінивши font-size на html, можна масштабувати весь текст на сторінці.

/* 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 */
}

Гумовий vs адаптивний макет

Головна відмінність між гумовим та адаптивним макетом — характер зміни ширини. Гумовий макет змінюється безперервно при будь-якій зміні вікна, а адаптивний — дискретно через медіа-запити.

Гумовий макет — безперервне масштабування, адаптивний — перемикання між фіксованими макетами. Кожен підхід має сильні та слабкі сторони.

На практиці більшість сучасних сайтів використовують гібридний підхід: гумова сітка з відносними одиницями + медіа-запити для критичних брейкпоїнтів. Чисто гумова верстка без медіа-запитів може виглядати неакуратно на дуже широких або дуже вузьких екранах.

Як реалізувати гумову верстку на CSS

Базова реалізація гумового макета включає три компоненти: відносні одиниці ширини, максимальні/мінімальні обмеження та flexbox або grid для розподілу простору.

/* 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-підхід з flex: 1 1 30% створює картки, які займають приблизно 30% ширини контейнера, але можуть звужуватися до 250px. Коли карток багато, вони переносяться на наступний рядок. Grid-підхід з auto-fit та minmax автоматично створює колонки, які вміщуються в контейнер.

Обмеження: min-width і max-width

Ключова проблема чисто гумової верстки — на дуже широких екранах рядок тексту розтягується до 2000+ пікселів, що робить читання неможливим. Для вирішення використовуються CSS-властивості min-width та max-width.

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

max-width: 1200px запобігає розтягуванню контенту на надшироких моніторах. min-width: 320px гарантує мінімальну ширину контейнера на маленьких екранах. Комбінація width: 90% + max-width створює гумовий контейнер з обмеженням — найпопулярніший патерн у сучасному веб-дизайні.

За даними HTTP Archive (2025), 92% сайтів у топ-1000 використовують max-width для контентних блоків. Стандартне значення — 1140–1200 пікселів для десктопних макетів.

Гібридний підхід: гумовий + адаптивний

Сучасний веб-дизайн рідко використовує гумовий або адаптивний підхід у чистому вигляді. Гібридний метод поєднує переваги обох: гумова сітка на відносних одиницях + медіа-запити для глобальних перебудов.

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

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

На десктопі макет використовує гумові колонки 1fr та 3fr — співвідношення зберігається при будь-якій ширині вікна. На мобільних медіа-запит перемикає на одноколоночну схему, де колонки розташовуються вертикально.

Перевага гібридного підходу — розробник пише менше медіа-запитів, оскільки гумова сітка автоматично підлаштовується під проміжні розміри. Медіа-запити потрібні лише для критичних змін структури, а не для кожного кроку ширини екрана.