Как работает gap во Flexbox и Grid?

Question

Accepted Answer

## Роль

`gap` задаёт промежутки **между** треками/элементами, не снаружи контейнера (это не margin на детях).

```css
.flex { display: flex; gap: 12px 20px; } /* row column в flex редко нужен двумерный */
.grid {
  display: grid;
  gap: 1rem;          /* и row, и column */
  row-gap: 1.5rem;
  column-gap: 1rem;
}
```

## Плюсы против margin-хаков

Нет «лишнего» margin у крайних элементов, проще `space-between`+отступы, не ломается при `wrap`. В Grid gap — между линиями треков; в Flex — между items (и при wrap — между «линиями» flex).

С `%` gap резолвится относительно размера контейнера (с нюансами спецификации).

## Итог

`gap` — каноничный способ ритма в Flex/Grid вместо margin на детях.