В чём разница между CSS Grid и Flexbox? Когда что выбирать?

Question

Accepted Answer

## Разница
Flex — **1D** контроль; Grid — **2D** треки и ячейки. Оба умеют выравнивание и gap; задачи разные.

## Эвристика

```css
/* toolbar, список тегов, центрирование */
.toolbar { display: flex; align-items: center; gap: .5rem; }
/* страница / галерея / форма из полей */
.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
```

Выбирайте Grid, когда важны строки *и* колонки, выравнивание по обеим осям сразу, именованные области. Flex — когда поток вдоль одной оси и гибкое распределение свободного места. Вложенность: grid снаружи, flex внутри — норма.

## Итог
Макет страницы → grid; полоска контролов → flex. «Всегда flex» или «всегда grid» — слабый ответ.