Как выравнивать элементы внутри CSS Grid?

Question

Accepted Answer

## Короткий ответ

Контейнерные: `justify-items` / `align-items` / `place-items`, `justify-content` / `align-content`; на элементе — `justify-self` / `align-self`.

## Смысл осей

- **items/self** — внутри ячейки;
- **content** — распределение треков, если сетка меньше контейнера.

```css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;      /* align + justify items */
  place-content: space-between;
}
.item-special { justify-self: end; }
```

Не путать с flex: в grid две оси треков, плюс выравнивание в ячейке.

## Итог

`place-items` для содержимого ячеек, `place-content` для самой сетки, `*-self` для исключений. Базовый must-know по Grid.