Порівняння flexbox та CSS grid

HTML та CSS~5 хв читання

Flexbox будує макети вздовж однієї осі (рядок або стовпець); CSS Grid будує на двох осях одразу (рядки і стовпці разом).

Теорія

Коротко

Flexbox = один ряд сидінь в автобусі: елементи течуть вздовж однієї осі та розтягуються або стискаються
Grid = схема кварталу: ти визначаєш вулиці І проспекти, елементи розміщуються на перетинах
Головна різниця: Flexbox розподіляє простір вздовж однієї осі; Grid контролює обидві одночасно
Одновимірний макет (навбар, група кнопок, ряд карток)? Flexbox. Сторінка або дашборд? Grid
Вони добре поєднуються: Grid для каркасу сторінки, Flexbox всередині кожної клітинки

Швидкий приклад

Однаковий візуальний результат, різний рівень контролю:

html

<!-- Flexbox: елементи течуть вздовж головної осі -->
<div class="flex-row">
  <div class="item">Nav</div>
  <div class="item">Logo</div>
  <div class="item">Login</div>
</div>

<!-- Grid: треки визначено заздалегідь -->
<div class="grid-layout">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

css

/* Flexbox: одна вісь, простір розподіляється між елементами */
.flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid: дві осі, зони визначено явно */
.grid-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "header header"
    "sidebar content";
}

Flexbox нічого не знає про рядки. Grid не займається потоком вмісту. Саме в цьому розриві й лежить рішення про вибір.

Flexbox починає з контенту і розподіляє навколо нього простір. Елементи розтягуються, стискаються, переносяться на новий рядок, але завжди вздовж однієї осі. Grid починає зі структури: спочатку визначаєш треки, потім елементи їх заповнюють. Тому Grid дозволяє елементам перекривати кілька рядків і стовпців незалежно, а елементи Flexbox завжди рухаються по потоку. Вкласти Flexbox всередину клітинки Grid - звична практика, яка покриває більшість реальних макетів.

Коли що використовувати

Навбар з логотипом і посиланнями: Flexbox (justify-content: space-between)
Ряд карток однакової висоти: Flexbox (align-items: stretch)
Макет з хедером, сайдбаром, контентом і футером: Grid
Дашборд з асиметричними панелями різного розміру: Grid (grid-template-areas)
Центрування одного елемента: підходять обидва (display: flex; place-items: center або display: grid; place-items: center)
Галерея де деякі елементи займають кілька колонок: Grid (grid-column: span 2)
Компонент всередині клітинки Grid, наприклад група кнопок у nav-зоні: Flexbox

Таблиця порівняння

Аспект	Flexbox	CSS Grid
Виміри	1D (рядок або стовпець)	2D (рядки і стовпці)
Головна сила	Розподіл простору вздовж однієї осі	Явне розміщення та перекриття елементів
Поведінка контейнера	Елементи займають доступний простір	Треки визначено заздалегідь
Керування елементами	`flex-grow`, `flex-shrink`, `flex-basis`, `order`	`grid-area`, `grid-column`, `grid-row`, `place-self`
Вирівнювання	`justify-content`, `align-items`, `align-self`	`justify-items`, `align-items`, `place-items`, `place-content`
Перекриття елементів	Складно	Нативна підтримка через спільну grid-зону
Підтримка браузерів	IE10+, повна підтримка в сучасних	IE11 частково; subgrid з Chrome 117
Коли використовувати	Навбари, кнопки, ряди карток, центрування	Макети сторінок, дашборди, галереї

Як браузер це обробляє

Коли браузер бачить display: flex, він створює flex formatting context. Спочатку обраховує гіпотетичний розмір кожного елемента через flex-basis, потім розподіляє залишковий простір відповідно до flex-grow. Перенос на новий рядок відбувається тільки при flex-wrap: wrap.

display: grid створює grid formatting context. Браузер будує карту треків з grid-template-columns і grid-template-rows, потім розміщує елементи або за явним grid-area, або через алгоритм автоматичного розміщення. Grid розраховує треки одноразово на початку; Flexbox перераховує при кожному reflow. Для довгих списків (1000+ елементів) Flexbox зазвичай швидший, бо кешування рядків простіше ніж розрахунок grid-треків.

Типові помилки

Помилка 1: flex-direction: column для макету з сайдбаром і основним контентом

css

/* Неправильно: flex-direction column складає елементи зверху вниз */
.layout {
  display: flex;
  flex-direction: column;
}

/* Виправлення: Grid створює справжню структуру з колонками поруч */
.layout {
  display: grid;
  grid-template-areas: "sidebar main";
  grid-template-columns: 240px 1fr;
}

Це найпоширеніша помилка з макетами, яку я бачу на код-рев'ю. Розробники, які добре знають Flexbox, тягнуться до flex-direction: column коли потрібні колонки поруч, а він просто складає елементи вертикально.

Помилка 2: align-items: center на Grid для повного центрування

css

/* Неправильно: центрує тільки по поперечній осі кожного треку */
.grid { display: grid; align-items: center; }

/* Виправлення: центрує по обох осях */
.grid { display: grid; place-items: center; }

align-items відповідає за block-вісь. justify-items - за inline-вісь. place-items - скорочення для обох, і саме воно потрібне для справжнього центрування.

Помилка 3: justify-content: space-between з елементами різного розміру

css

/* Виглядає нерівномірно коли ширина елементів різна */
.nav {
  display: flex;
  justify-content: space-between;
}

/* Виправлення: gap дає передбачуваний відступ */
.nav {
  display: flex;
  gap: 1rem;
}

space-between розподіляє вільний простір між елементами. Якщо ширина елементів різна, проміжки візуально відрізняються. gap дає однакові відступи незалежно від розміру елементів і не виходить за зовнішні краї після перенесення рядка.

Помилка 4: Відсутність min-height: 0 у дочірніх елементах flex-колонки

css

/* Елемент відмовляється стискатись і виходить за межі батька */
.sidebar-item {
  display: flex;
  flex-direction: column;
  /* Відсутній: min-height: 0 */
}

/* Виправлення */
.sidebar-item {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* Дозволяє стискатись нижче розміру контенту */
  overflow: auto;
}

Flex-елементи за замовчуванням мають min-height: auto, що не дозволяє стискатись нижче розміру контенту. В колонкових макетах це викликає переповнення. min-height: 0 знімає це обмеження.

Помилка 5: Subgrid без відповідних треків у батьківському елементі (Chrome 117+)

css

/* Батько визначає тільки два стовпці */
.grid-parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

/* Subgrid автоматично використовує auto якщо кількість треків не збігається */
.grid-child {
  display: grid;
  grid-template-columns: subgrid;
}

Subgrid успадковує треки батьківського елемента. Якщо батько не визначає потрібні треки, subgrid повертається до auto і вирівнювання ламається без жодних помилок. Спочатку визнач явні треки в батьківському елементі.

Де це зустрічається

React і Next.js: Flexbox для компонентів (кнопки та навбари в Chakra UI); Grid для структури додатку (дашборд Vercel)
Tailwind CSS: flex space-x-4 для inline-списків; grid-cols-12 для каркасу сторінок у темах Shopify
Bootstrap 5: .d-flex .justify-content-between побудований на Flexbox; складні форми з кількома колонками використовують Grid
Material UI: Flexbox у компонентах Card і List; Grid у таблицях даних

Питання на співбесіді

Q: Яка різниця між justify-content і justify-items?
A: justify-content розподіляє простір між треками або елементами на рівні контейнера. justify-items вирівнює кожен елемент всередині його власної grid-зони. У Flexbox є justify-content, але немає justify-items - ця властивість працює тільки в Grid.

Q: Чим відрізняється flex-basis від width?
A: flex-basis - це початковий розмір елемента до застосування flex-grow і flex-shrink. width - це розмір у блоковій моделі. Якщо задані обидва, у flex-контексті перемагає flex-basis. flex-basis: 0 змушує всі елементи починати з нуля і рівномірно зростати.

Q: Як працює grid-auto-flow: dense?
A: Коли spanning-елементи залишають порожні місця в сітці, dense наказує браузеру заповнювати їх меншими елементами з пізніших позицій у DOM. Це покращує щільність сітки, але змінює візуальний порядок відносно DOM-порядку, що може ускладнити навігацію клавіатурою.

Q: Чому gap краще за margins у flex або grid-контейнерах?
A: gap застосовується тільки між елементами, не на зовнішніх краях. Margins на дочірніх елементах накопичуються і можуть створювати подвійні відступи по краях або після перенесення рядка. gap коректно працює в обох контекстах.

Q: Що таке subgrid і коли він реально потрібен?
A: Subgrid дозволяє вкладеній сітці успадковувати розміри треків батьківської. Без нього картка всередині Grid-клітинки визначає власні внутрішні треки, які не збігатимуться з картками у сусідніх клітинках. З subgrid всі картки ділять однакові row-треки і їх контент вирівнюється по колонках. Доступно в Chrome 117+, Firefox 71+, Safari 16+. Для старших браузерів CSS custom properties на спільному батьківському елементі - практична альтернатива.

Приклади

Навбар на Flexbox (React, production-патерн)

jsx

function Navbar() {
  return (
    <nav style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '1rem 2rem',
      borderBottom: '1px solid #eee'
    }}>
      <span style={{ fontWeight: 'bold' }}>Logo</span>
      <ul style={{ display: 'flex', listStyle: 'none', gap: '2rem', margin: 0 }}>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
      <button>Login</button>
    </nav>
  );
}

Логотип зліва, навігація з рівними відступами, кнопка входу справа. Внутрішній ul теж flex-контейнер. Це і є патерн «Grid для каркасу, Flexbox всередині» на практиці.

Макет сторінки на CSS Grid

css

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

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

Іменовані зони роблять структуру читабельною з першого погляду. Зміни grid-template-columns на 1fr в media query - і весь макет перебудовується автоматично.

Галерея з перекриттям колонок

css

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Виділений елемент займає дві перші колонки */
.gallery .featured {
  grid-column: span 2;
}

Перкриття елементів - це те, де Grid не має аналога у Flexbox. Зробити один flex-елемент шириною двох колонок при збереженні спільної сітки неможливо. Grid підтримує це нативно.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?