justify-content---align-content

Grid ----justify-content---align-content

Отличный фрагмент кода! Это идеальный пример для понимания CSS Grid. Давай разберем каждое свойство на конкретных примерах. Я покажу, как они работают визуально.

## 🎯 Полный разбор CSS Grid выравнивания

### Исходный код для всех примеров:

/* Базовый контейнер */

.container {

display: grid;

grid-template-columns: repeat(3, 100px);

grid-template-rows: repeat(2, 100px);

gap: 4px; /* Добавим небольшой зазор между ячейками, чтобы было нагляднее */

width: 500px; /* Контейнер шире, чем 3 колонки (3*100=300px) */

height: 300px; /* Контейнер выше, чем 2 ряда (2*100=200px) */

border: 2px solid #333;

background: #f0f0f0;

}

/* Ячейки для наглядности */

.cell {

background: #4CAF50;

color: white;

padding: 10px;

border: 1px solid #fff;

text-align: center;

}

---

## 1️⃣ `justify-content` — горизонтальное выравнивание ВСЕХ ячеек

Это свойство двигает всю сетку целиком внутри контейнера по горизонтали.

```css

.container {

justify-content: center; /* Сетка по центру */

}

```

| Значение | Результат | Описание |

|----------|-----------|----------|

| `justify-content: start` | [█████]·[█████]·[█████]<br>          ⬅️ | Сетка прижата к левому краю |

| `justify-content: center` |    ·[█████]·[█████]·[█████]· | Сетка по центру |

| `justify-content: end` |           [█████]·[█████]·[█████]➡️ | Сетка прижата к правому краю |

| `justify-content: space-between` | [█████][█████][█████]<br>первая к левому, последняя к правому | Первая ячейка слева, последняя справа |

| `justify-content: space-around` | ·[█████]··[█████]··[█████]· | Равные отступы вокруг каждой ячейки |

| `justify-content: space-evenly` | ··[█████]··[█████]··[█████]·· | Равные отступы между всеми элементами |

---

## 2️⃣ `align-content` — вертикальное выравнивание ВСЕХ ячеек

Двигает сетку целиком по вертикали.

```css

.container {

align-content: center; /* Сетка по центру по вертикали */

}

```

| Значение | Описание |

|----------|----------|

| `align-content: start` | Сетка прижата к верху |

| `align-content: center` | Сетка по центру по вертикали |

| `align-content: end` | Сетка прижата к низу |

| `align-content: space-between` | Первый ряд вверху, последний внизу |

| `align-content: space-around` | Равные отступы сверху и снизу каждого ряда |

**Важно:** Эти свойства работают только когда контейнер **больше**, чем суммарный размер всех ячеек!

---

## 3️⃣ `justify-items` — выравнивание элементов ВНУТРИ ячеек (по горизонтали)

А вот это уже про то, как элемент ведёт себя **внутри своей ячейки**.

```css

.container {

justify-items: center; /* Элементы по центру ячеек по горизонтали */

}

```

**Визуализация для одной ячейки (100×100px):**

| Значение | Как выглядит |

|----------|--------------|

| `justify-items: stretch` (по умолчанию) | [████████████████████]<br>элемент растянут на всю ширину |

| `justify-items: start` | [███···················]<br>элемент прижат к левому краю |

| `justify-items: center` | [·······████·······]<br>элемент по центру |

| `justify-items: end` | [···················███]<br>элемент прижат к правому краю |

**Пример с кодом:**

```css

.container {

justify-items: center; /* Все элементы по центру ячеек */

}

```

Если внутри ячейки текст или блок меньшего размера, он будет располагаться по центру.

---

## 4️⃣ `align-items` — выравнивание элементов ВНУТРИ ячеек (по вертикали)

То же самое, но по вертикали.

```css

.container {

align-items: center; /* Элементы по центру ячеек по вертикали */

}

```

| Значение | Как выглядит (вид сбоку) |

|----------|--------------------------|

| `align-items: stretch` (по умолчанию) | [█████] элемент растянут на всю высоту |

| `align-items: start` | элемент прижат к верху ячейки |

| `align-items: center` | элемент по центру по вертикали |

| `align-items: end` | элемент прижат к низу ячейки |

---

## 5️⃣ Индивидуальное выравнивание: `justify-self` и `align-self`

Это самое мощное! Можно переопределить поведение для конкретного элемента.

```css

/* HTML */

</div>

/* CSS */

.container {

display: grid;

grid-template-columns: repeat(3, 100px);

grid-template-rows: repeat(2, 100px);

gap: 4px;

justify-items: center; /* Все элементы по центру */

align-items: center; /* Все элементы по центру */

background: #f0f0f0;

}

.cell {

background: #4CAF50;

color: white;

padding: 10px;

border: 1px solid #fff;

}

.special-item {

justify-self: end; /* Этот элемент прижмется к правому краю своей ячейки */

align-self: start; /* Этот элемент прижмется к верху своей ячейки */

}

```

**Что получится:**

- Ячейки 1, 2, 4, 5, 6 — идеально по центру своих квадратов

- Ячейка 3 — будет в **правом верхнем углу** своей ячейки

---

## 📝 Полный практический пример

Скопируй этот код в файл `grid-demo.html` и открой в браузере:

```html

<!DOCTYPE html>

<html>

<head>

<style>

.container {

display: grid;

grid-template-columns: repeat(3, 100px);

grid-template-rows: repeat(2, 100px);

gap: 10px;

width: 400px;

height: 250px;

border: 3px solid #333;

margin: 20px;

background: #eee;

/* Поиграй с этими значениями */

justify-content: center;

align-content: center;

justify-items: center;

align-items: center;

}

.cell {

background: #4CAF50;

color: white;

padding: 5px;

border: 2px solid #fff;

width: 50px; /* Специально сделаем меньше ячейки */

height: 50px; /* чтобы видеть выравнивание */

text-align: center;

line-height: 50px;

}

.special {

justify-self: end;

align-self: start;

background: #ff5722;

}

.example {

margin: 10px;

padding: 10px;

border-left: 4px solid #4CAF50;

background: #f9f9f9;

}

</style>

</head>

<body>

<h3>Обычные ячейки (по центру)</h3>

</div>

<h3>Красная ячейка переопределяет выравнивание</h3>

</div>

<p><strong>justify-self: end; align-self: start;</strong></p>

</div>

</body>

</html>

```

## 🎓 Золотые правила Grid выравнивания

1. **justify** — горизонталь (как текст — "justify text" — ширина)

2. **align** — вертикаль (как "align" — высота)

3. **content** — двигает **сетку целиком** (работает когда контейнер больше сетки)

4. **items** — двигает **все элементы внутри их ячеек**

5. **self** — двигает **конкретный элемент** внутри его ячейки

**Запомни аналогию:**

- `content` — это как двигать книжный шкаф по комнате

- `items` — как расставлять книги на полках (все одинаково)

- `self` — как отдельную книгу поставить криво

Попробуй поиграть со значениями в примере, и всё станет интуитивно понятно!