Урок 29. Обзор урока: Flexbox vs Grid: сравнение

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

⚡ Кратко

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

О чём урок

Этот урок отвечает на главный практический вопрос вёрстки: когда выбирать Flexbox, а когда Grid. Ключ — размерность задачи. Flexbox распределяет элементы вдоль одной оси (строка или колонка), Grid строит двумерную сетку из строк и колонок. Мы разберём одну и ту же задачу двумя способами, сравним по критериям и покажем, как они работают вместе на реальной странице.

Ключевые понятия

  • Flexbox — 1D — раскладка вдоль одной оси
  • Grid — 2D — строки и колонки одновременно
  • контент диктует раскладку (Flexbox) vs раскладка диктует контент (Grid)
  • component vs page — Flexbox для компонентов, Grid для каркаса
  • gap — промежутки, работают в обоих
  • совместное использование — Grid + Flexbox вместе

Структура урока

Теория

1D vs 2D, аналогия и когда что выбирать.

Справочник

Сравнительная таблица Flexbox vs Grid.

Примеры

Живые превью: одна задача двумя способами.

Старый vs Новый

float-сетки → Grid + Flexbox.

Задания

Выбор инструмента под задачу.

Решения

Разбор с живым результатом.

Ошибки

Grid там, где хватило бы Flexbox, и наоборот.

Домашнее задание

Макет на Grid + Flexbox.

Ресурсы

Документация и повторение.

Навигация