Чем CSS Grid отличается от Flexbox?

Question

Accepted Answer

## Разница осей

- **Flex** — 1D: ряд или колонка; вторая ось — выравнивание, не полноценная сетка.
- **Grid** — 2D: строки и колонки одновременно, области (`grid-template-areas`), явное позиционирование по линиям.

```css
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
}
.toolbar { display: flex; gap: 8px; }
```

## Когда что

Страница/галерея/дашборд — Grid. Навбар, группа кнопок, вертикальный стек карточки — Flex. Их комбинируют: Grid снаружи, Flex внутри.

Overlap, плотные макеты «как в журнале» — сильная сторона Grid (`span`, dense packing).

## Итог

Не «Grid вместо Flex», а 2D vs 1D. Выбирайте по задаче раскладки.