Как создать макет с помощью CSS Grid?

Question

Accepted Answer

**CSS Grid** — это двумерная система компоновки, которая одновременно управляет **строками и столбцами**, в отличие от одной строки в Flexbox. Вы определяете сетку в контейнере и размещаете в ней элементы.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Единица fr и repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") распределяет доступное пространство — `1fr 2fr` делит его в соотношении 1:2. `repeat(3, 1fr)` — это сокращение для трёх равных дорожек.

## Адаптивная сетка БЕЗ медиа-запросов

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Эта одна строка создаёт полностью адаптивную сетку карточек: каждый столбец имеет минимум `250px`; браузер вмещает **как можно больше** в одну строку и переносит остальное — автоматически переходя от 4 столбцов на рабочем столе к 1 на мобильном. `auto-fit` + `minmax` — один из самых любимых паттернов в Grid.

## Размещение элементов по ячейкам

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Элементы могут охватывать несколько строк/столбцов, что позволяет создавать журнальные макеты, которые сложны в Flexbox.

## Grid vs Flexbox

- **Grid** — 2D-компоновка (строки *и* столбцы): макеты страниц, сетки карточек, панели управления.
- **Flexbox** — 1D-компоновка (одна строка или столбец): навигационные панели, группы кнопок, выравнивание по центру.

Они хорошо комбинируются — ячейка сетки сама может быть flex-контейнером.

## Почему это важно

Grid — это самый мощный инструмент для компоновки в CSS, который чисто обрабатывает полнострочные макеты и адаптивные сетки карточек, часто заменяя хаки вложенных div-ов.

Один паттерн `auto-fit`/`minmax` устраняет необходимость во множестве медиа-запросов.