Урок 29. Решения: Flexbox vs Grid: сравнение

📁 Раздел: CSS Grid ⏱️ Время изучения: ~55 мин 🎯 Сложность: Средняя

⚡ Кратко

Навбар — Flexbox (1D), галерея — Grid (2D), макет — Grid снаружи + Flexbox внутри. Под каждым решением живой результат.

Решение 1 — навбар (Flexbox)

Одна линия, элементы по краям — Flexbox с justify-content: space-between.

Logo
ГлавнаяО насКонтакты
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Решение 2 — галерея (Grid)

Двумерная сетка: 3 колонки, ряды добавляются автоматически. Все карточки ровные.

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

Решение 4 — каркас + компонент (Grid + Flexbox)

Grid задаёт макет «сайдбар + контент», шапка растянута на обе колонки и внутри использует Flexbox.

LogoМеню
Контент
.page {                       /* Grid — макет (2D) */
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .75rem;
}
.page > header {
  grid-column: 1 / -1;
  display: flex;              /* Flexbox — внутри шапки (1D) */
  justify-content: space-between;
  align-items: center;
}
Вывод: Grid и Flexbox не заменяют друг друга. Grid строит сетку макета, Flexbox выравнивает элементы вдоль линии внутри ячеек.

Навигация