Урок 29. Примеры: Flexbox vs Grid: сравнение

Рабочие примеры

В каждом примере сверху живой результат, ниже — код. Примеры идут от одномерных задач (Flexbox) к двумерным (Grid) и заканчиваются их совместным использованием.

1. Flexbox: навбар в один ряд (1D)

Классическая одномерная задача: логотип слева, пункты меню справа. Одна ось — Flexbox идеален.

.navbar {
  display: flex;
  justify-content: space-between; /* раздвигаем по краям */
  align-items: center;
  gap: 1rem;
}

2. Flexbox: центрирование по одной оси

Расталкивание и центрирование вдоль линии — это про Flexbox. Меняй justify-content и смотри, как сдвигаются блоки.

.row {
  display: flex;
  justify-content: center;        /* или space-between */
  gap: .5rem;
}

3. Grid: галерея карточек (2D)

Несколько карточек ровными строками и колонками — двумерная задача. Grid выстраивает идеальную сетку.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки */
  gap: .75rem;                            /* строки появятся сами */
}

4. Одна задача — два способа

Ряд из трёх блоков можно собрать и на Flexbox, и на Grid. Для одной линии уместнее Flexbox; Grid здесь избыточен.

/* Одна линия → Flexbox */
.row { display: flex; gap: .5rem; }
.row > * { flex: 1; }

/* То же самое на Grid — работает, но это 2D-инструмент
   для 1D-задачи */
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

5. Grid + Flexbox вместе

Самый частый реальный сценарий: Grid задаёт каркас страницы (сайдбар + контент), а Flexbox раскладывает содержимое внутри шапки.

/* Grid — каркас страницы (2D) */
.page {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .75rem;
}
.page > header { grid-column: 1 / -1; }

/* Flexbox — содержимое шапки (1D) */
.page > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}