Flexbox vs Grid — 10 реальних layout-ів і що чим верстати

Два контрастні способи організації: рядок різних об'єктів проти строгої сітки

"Верстати на Flexbox чи на Grid?" — питання, яке кожен розробник ставить собі по кілька разів на день. У найгіршій формі відповідь звучить як догма: "Grid новіший, тому крутіший" або навпаки "Flexbox простіший, Grid — оверкіл".

Обидві відповіді неправильні. Це не конкуренти — це два інструменти під різні задачі, як викрутка і молоток. У цій статті — просте правило вибору і 10 реальних макетів з кодом: побачиш, де кожен інструмент виграє і чому.

Спершу — трохи історії (вона пояснює різницю)

Flexbox і Grid створювалися під різні проблеми.

Перший чернетковий стандарт Flexbox з'явився у 2009 році — його мета була скромною: розкладати елементи в один ряд або колонку і розумно ділити вільне місце. До нього горизонтальне меню верстали через float і inline-block — з магічними пробілами, клірфіксами та болем.

Grid запропонувала Microsoft у квітні 2011 — вже як систему повноцінних двовимірних макетів: рядки І колонки одночасно. А далі сталася найкоординованіша прем'єра в історії CSS: у березні 2017 Grid вийшов у Firefox 52 (7 березня), Chrome 57 (9 березня), Opera 44 (21 березня) і Safari 10.1 (27 березня). Легендарний CSS-експерт Eric Meyer тоді написав: "Чотири браузери від чотирьох вендорів за чотири тижні. Нічого подібного ще не було".

Звідси головна різниця в ДНК:

Правило вибору за 10 секунд

Постав собі одне питання: чи має цей макет форму сітки, яку я можу намалювати наперед?

• Можу намалювати сітку (колонки однакової ширини, зони "шапка/сайдбар/контент") → Grid
• Елементи просто йдуть потоком, і їхні розміри залежать від вмісту → Flexbox

Rachel Andrew — людина, яка зробила для популяризації Grid більше за всіх — формулює це як layout-in vs content-out: Grid працює "від макета до вмісту", Flexbox — "від вмісту до макета". Тепер перевіримо правило на реальних задачах.

1. Навбар: лого + меню + кнопка → Flexbox

Класика: лого ліворуч, меню посередині або праворуч, кнопка входу в кінці. Один ряд, елементи різної природної ширини — типовий контент-потік:

.navbar {
  display: flex;
  align-items: center;
  gap: 24px;
}

.navbar .login-btn {
  margin-left: auto; /* виштовхує кнопку вправо */
}

Трюк з margin-left: auto — фірмова фішка Flexbox: авто-марджин з'їдає весь вільний простір. Grid тут змусив би вигадувати колонки для елементів, ширину яких ти не знаєш.

2. Ідеальне центрування → Grid (несподівано?)

Обидва вміють, але порахуй рядки:

/* Flexbox — 3 властивості */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid — 2 властивості */
.hero {
  display: grid;
  place-items: center;
}

place-items: center — найкоротше центрування в історії CSS. Ми розбирали всі 10 способів у статті «Як відцентрувати div» — але для нового коду достатньо цих двох.

3. Ряд карток однакової ширини → Grid

Три картки товарів у ряд, всі однакової ширини незалежно від вмісту:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

На Flexbox довелося б писати flex: 1 1 0 кожній картці й молитися, щоб довгий заголовок не розтягнув одну з них. У Grid колонки тримають ширину незалежно від вмісту — бо макет тут головний. Це і є "layout-in".

4. Holy Grail: шапка, сайдбар, контент, футер → Grid

Найвідоміший макет вебу. До 2017 року його верстали через float-хаки — аж настільки криво, що макет отримав іронічну назву "Святий Грааль" (всі шукають, ніхто не знайшов). З Grid він займає 10 рядків:

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.page > header { grid-area: header; }
.page > aside  { grid-area: sidebar; }
.page > main   { grid-area: content; }
.page > footer { grid-area: footer; }

grid-template-areas — це буквально ASCII-малюнок твого макета в CSS. Двовимірна задача, яку видно з першого погляду — навіть питання "Flexbox чи Grid" тут не виникає.

5. Форма: лейбли + поля → Grid

Лейбл праворуч, поле ліворуч, все вирівняно по вертикальній лінії:

.form {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 16px;
  align-items: center;
}

Сіль у max-content: перша колонка стає шириною найдовшого лейбла, і всі поля автоматично вирівнюються по одній лінії. На Flexbox кожен рядок форми — окремий контейнер, який нічого не знає про сусідів, тому вирівняти лейбли різної довжини неможливо без фіксованої ширини.

6. Адаптивна галерея без media queries → Grid

Задача: картки шириною мінімум 250px, кількість колонок хай браузер вирахує сам:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Один рядок — і галерея сама перебудовується: 4 колонки на десктопі, 2 на планшеті, 1 на телефоні. Жодного media query. Це, мабуть, найкорисніший рядок CSS десятиліття — розбирали його в уроці про Grid.

7. Теги і чіпи змінної ширини → Flexbox

Хмаринка тегів під статтею: кожен тег своєї ширини, скільки влізе в ряд — стільки влізе, решта переносяться:

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Дзеркальна ситуація до карток: тут розмір диктує вміст (текст тега), а макет лише огортає. Grid з його жорсткими колонками зробив би всі теги однакової ширини — і це виглядало б дивно. Це "content-out".

8. Sticky footer → Grid

Футер має бути внизу екрана, навіть якщо контенту мало:

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* шапка, контент, футер */
  min-height: 100vh;
}

1fr посередині з'їдає весь вільний простір і виштовхує футер донизу. На Flexbox теж можна (flex-direction: column + flex: 1 на контенті) — але Grid-версія не вимагає чіпати дочірні елементи: весь макет описаний в одному місці.

9. Медіа-об'єкт: аватар + текст → Flexbox

Коментар у соцмережі: кругла аватарка ліворуч, ім'я і текст праворуч:

.comment {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.comment img { flex-shrink: 0; } /* аватар не стискається */

Аватар фіксований, текст займає решту — класичний однорядковий потік. flex-shrink: 0 — важлива деталь: без нього довгий текст стисне картинку.

10. Дашборд з блоками різного розміру → Grid

Адмінка: один великий графік на 2×2 клітинки, навколо — малі віджети:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.widget-main {
  grid-column: span 2;
  grid-row: span 2;
}

span дозволяє елементу займати кілька клітинок — так верстаються всі "плиткові" інтерфейси від Pinterest до Windows-меню. У Flexbox поняття "займи 2 ряди" просто не існує — рядів він не бачить.

Рахуємо: 6 Grid, 4 Flexbox. І це нормально

Підсумкова таблиця-шпаргалка:

Але найважливіше: вони працюють разом. Типова сторінка — це Grid для каркаса і Flexbox всередині кожної зони:

.page   { display: grid; }  /* каркас: шапка, сайдбар, контент */
.navbar { display: flex; }  /* всередині шапки */
.card   { display: flex; flex-direction: column; } /* всередині картки */

Питання ніколи не стоїть "або-або" — питання "що на якому рівні".

Часті питання

Наступного разу, коли рука потягнеться писати display: flex, постав собі питання з цієї статті: "я можу намалювати цю сітку наперед?" Якщо так — пиши grid, збережеш собі годину боротьби з flex-basis.

Закріпити на практиці: уроки Flexbox (частина 1), Flexbox (частина 2) та CSS Grid, а під рукою тримай шпаргалку з Flexbox і шпаргалку з Grid.