Теория — Урок 29

Главная идея: одна ось против двух

Flexbox и Grid — это не конкуренты, а инструменты для разных задач. Всё сводится к одному вопросу: раскладка идёт в одном направлении или в двух сразу?

Flexbox работает по одной оси — либо строка, либо колонка. Он отлично распределяет элементы вдоль линии: расталкивает их, центрирует, делит свободное место. Здесь контент диктует раскладку: ты кладёшь элементы, и flex решает, как их разместить вдоль линии.

Grid работает по двум осям сразу — строки И колонки. Ты сначала рисуешь сетку (сколько колонок, сколько строк), а потом помещаешь элементы в ячейки. Здесь раскладка диктует контент: каркас задан заранее, элементы встают в готовые ячейки.

Flexbox — это бусины на нитке. Нитка одна (одна ось). Бусины можно сдвинуть к началу, к концу, к центру, растянуть промежутки — но все они на одной линии.
Grid — это шахматная доска. Есть строки И колонки, готовые клетки. Каждую фигуру ставишь в конкретную клетку по координатам «строка × колонка». Структура задана заранее, а не «вытекает» из фигур.

Как это выглядит: 1D vs 2D

Слева Flexbox распределяет элементы вдоль одной оси. Справа Grid задаёт обе оси — строки и колонки.

Flexbox распределяет вдоль одной оси; Grid строит двумерную сетку.

Как работает Flexbox

Объявляешь display: flex на контейнере — дети выстраиваются вдоль главной оси (по умолчанию горизонтально). Дальше управляешь распределением: justify-content — вдоль главной оси, align-items — поперёк. Размеры элементов гибкие: flex-grow/flex-shrink позволяют им расти и сжиматься под контент.

📄 lesson-29/navbar.css

/* Одномерная задача: пункты меню в один ряд */
.navbar {
  display: flex;
  justify-content: space-between; /* расталкиваем по краям */
  align-items: center;           /* выравниваем по вертикали */
  gap: 1rem;
}

Как работает Grid

Объявляешь display: grid и описываешь сетку: grid-template-columns задаёт колонки, grid-template-rows — строки, gap — промежутки. Элементы автоматически встают в ячейки или размещаются явно через grid-column/grid-row/grid-area.

📄 lesson-29/page.css

/* Двумерная задача: каркас страницы */
.page-layout {
  display: grid;
  grid-template-columns: 18rem 1fr; /* сайдбар + контент */
  gap: 2rem;
}

Когда что выбирать

Flexbox — когда раскладка по одной линии: навбар, ряд кнопок, теги, тулбар, центрирование одного блока, элементы внутри карточки.
Grid — когда нужна двумерная структура: каркас «шапка / сайдбар / контент / футер», галерея карточек по строкам и колонкам, сложные адаптивные сетки.
Вместе — Grid задаёт общий макет страницы, а Flexbox раскладывает содержимое внутри каждой ячейки/компонента. Это самый частый сценарий в реальных проектах.

Эвристика: спроси себя — «мне нужно выровнять элементы по одной линии или построить сетку из строк и колонок?» Линия → Flexbox. Сетка → Grid.

Частая ошибка

Новички пытаются собрать двумерную галерею карточек на одном Flexbox с flex-wrap: wrap. Карточки переносятся, но колонки «плывут»: в последнем ряду элементы не выравниваются по сетке, потому что Flexbox не знает про колонки — он знает только про линию. Для ровной сетки строк и колонок нужен Grid.

Важно: и Flexbox, и Grid поддерживают свойство gap — не нужно городить margin между элементами.

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