Урок 29. Старый vs Новый: Flexbox vs Grid: сравнение

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

⚡ Кратко

Раньше двумерные макеты собирали на float и фиксированных ширинах. Сегодня: Grid — для каркаса (2D), Flexbox — для компонентов (1D).

Старый подход — float-сетки

До появления Flexbox и Grid двумерные макеты собирали на float с фиксированными ширинами и clearfix-хаками. Промежутки приходилось высчитывать вручную через margin, а высоты колонок не выравнивались.

📄 lesson-29/old.css
.sidebar {
  float: left;
  width: 240px;
  margin-right: 20px;
}
.content {
  float: left;
  width: calc(100% - 260px);
}
.row::after {     /* clearfix-хак, чтобы родитель «увидел» float */
  content: "";
  display: block;
  clear: both;
}
⚠️ Проверить по документации: некоторые проекты до сих пор используют Flexbox с flex-wrap как «сетку». Это валидно, но для строго двумерных раскладок предпочтителен Grid.

Новый подход — Grid + Flexbox

Grid описывает двумерную структуру напрямую: колонки, строки и промежутки одной строкой. Flexbox берёт на себя одномерные компоненты внутри. Хаки с float и clearfix больше не нужны.

📄 lesson-29/new.css
/* Каркас — Grid (2D) */
.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* сайдбар + контент */
  gap: 20px;                         /* промежуток без margin-хаков */
}

/* Навбар внутри — Flexbox (1D) */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Итог: то, что раньше требовало float, фиксированных ширин и clearfix, сегодня решается двумя строками Grid плюс Flexbox для внутренних компонентов.

Навигация