CSS Flexbox vs. Grid: що вибрати для розмітки сайту?

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

Flexbox ідеально підходить для одновимірних макетів, тобто коли потрібно вирівнювати елементи в рядок або в стовпчик. Наприклад, якщо у вас є набір кнопок, які потрібно розташувати в одну лінію, використання Flexbox виглядає логічним:

.container {
  display: flex;
  justify-content: space-between;
}
.button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

В цьому випадку .container розміщує кнопки рівномірно по ширині контейнера.

Grid, натомість, створений для двовимірних макетів. Це означає, що можна одночасно контролювати розташування елементів і по горизонталі, і по вертикалі. Наприклад, розміщення карток у сітці виглядає так:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #ddd;
}

Цей код ділить контейнер .grid на три рівні колонки з рівними проміжками між елементами.

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

Наприклад, якщо потрібно зробити адаптивний макет для карток товарів, Grid дозволяє легко змінювати кількість колонок залежно від ширини екрану:

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Flexbox також можна використовувати для вирівнювання елементів усередині Grid-контейнера. Наприклад, коли потрібне вертикальне центрування:

.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

Загалом, якщо вам потрібно просто вирівняти елементи в один рядок чи стовпець – використовуйте Flexbox. Якщо ж потрібно будувати складні макети з чітким розташуванням елементів, Grid буде кращим вибором. Найчастіше в реальних проєктах обидві технології використовуються разом, що дозволяє отримати максимум гнучкості.