Выравнивание в Grid

Свойства выравнивания в Grid управляют расположением треков внутри контейнера и элементов внутри ячеек по двум осям: inline (горизонтальная) и block (вертикальная).

Зачем нужно

Grid даёт полный контроль над позиционированием: можно выровнять всю сетку внутри контейнера, все элементы внутри ячеек или отдельный элемент. Это устраняет необходимость хаков с margin: auto и transform.

Где используется

  • Центрирование контента в ячейках
  • Распределение столбцов/строк в контейнере
  • Выравнивание отдельных элементов в своих ячейках
  • Создание промежутков через gap

Предпосылки

Две оси Grid

                    inline axis (горизонтальная)
                    ──────────────────────────→
               ┌─────────────────────────────────┐
          │    │  ┌─────────┐  ┌─────────┐       │
  block   │    │  │ item 1  │  │ item 2  │       │
  axis    │    │  └─────────┘  └─────────┘       │
(верти-   │    │  ┌─────────┐  ┌─────────┐       │
кальная)  ↓    │  │ item 3  │  │ item 4  │       │
               │  └─────────┘  └─────────┘       │
               └─────────────────────────────────┘
  • justify = inline axis (горизонтальная для LTR)
  • align = block axis (вертикальная)

Выравнивание треков (на контейнере)

Работает, когда сетка меньше контейнера (треки не занимают всё пространство).

justify-content — треки по горизонтали

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  width: 900px; /* Есть свободное место */

  justify-content: start;         /* Прижать влево */
  justify-content: end;           /* Прижать вправо */
  justify-content: center;        /* Центрировать */
  justify-content: space-between; /* Между треками */
  justify-content: space-around;  /* Вокруг треков */
  justify-content: space-evenly;  /* Равномерно */
  justify-content: stretch;       /* Растянуть (по умолчанию) */
}

align-content — треки по вертикали

.grid {
  display: grid;
  grid-template-rows: 100px 100px;
  height: 500px; /* Есть свободное место */

  align-content: start;
  align-content: end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
  align-content: stretch;
}

place-content — сокращение

.grid {
  /* place-content: align-content justify-content */
  place-content: center center; /* Центрирование по обеим осям */
  place-content: center;        /* Одно значение = для обеих */
  place-content: space-between stretch;
}

Выравнивание элементов (на контейнере)

Управляет позицией всех элементов внутри их ячеек.

justify-items — элементы по горизонтали

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  justify-items: stretch; /* По умолчанию — на всю ширину ячейки */
  justify-items: start;   /* К левому краю ячейки */
  justify-items: end;     /* К правому краю ячейки */
  justify-items: center;  /* По центру ячейки */
}

align-items — элементы по вертикали

.grid {
  display: grid;
  grid-template-rows: 200px 200px;

  align-items: stretch; /* По умолчанию — на всю высоту ячейки */
  align-items: start;   /* К верху ячейки */
  align-items: end;     /* К низу ячейки */
  align-items: center;  /* По центру ячейки */
  align-items: baseline; /* По базовой линии текста */
}

place-items — сокращение

.grid {
  /* place-items: align-items justify-items */
  place-items: center center; /* Все элементы по центру ячеек */
  place-items: center;        /* Одно значение = для обеих осей */
  place-items: start stretch;
}

Выравнивание отдельного элемента

justify-self и align-self

Переопределяют justify-items / align-items для конкретного элемента:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start; /* Все к верху */
}

.special-item {
  align-self: end;     /* Этот — к низу */
  justify-self: center; /* И по центру горизонтально */
}

place-self — сокращение

.item {
  /* place-self: align-self justify-self */
  place-self: center center;
  place-self: end start;
}

Gap — промежутки

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  /* Одинаковый gap */
  gap: 20px;

  /* Разный: row-gap | column-gap */
  gap: 20px 30px;

  /* Отдельно */
  row-gap: 20px;
  column-gap: 30px;
}

gap работает только между элементами, не создаёт отступ по краям. Для отступов по краям используйте padding на контейнере.

Идеальное центрирование

/* Самый простой способ центрировать что угодно */
.center {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

<div class="center">
  <div>Я в центре!</div>
</div>

Сводная таблица

Свойство На чём Ось Что делает
justify-content Контейнер inline Выравнивание треков
align-content Контейнер block Выравнивание треков
place-content Контейнер обе Сокращение
justify-items Контейнер inline Все элементы в ячейках
align-items Контейнер block Все элементы в ячейках
place-items Контейнер обе Сокращение
justify-self Элемент inline Один элемент в ячейке
align-self Элемент block Один элемент в ячейке
place-self Элемент обе Сокращение
gap Контейнер обе Промежутки между треками

Частые ошибки

  1. justify-content при 1fr столбцах — свободного места нет, свойство не даст эффекта:
    /* Не сработает — 1fr забирают всё */
grid-template-columns: 1fr 1fr;
justify-content: center; /* Нет эффекта */
  2. Путаница -content и -items — -content двигает треки, -items двигает элементы внутри ячеек
  3. Забыли высоту контейнера для align-content — без высоты нет свободного места по вертикали
  4. stretch не работает с фиксированным размером — если задан width/height, элемент не растянется

Практика

  • Центрировать элемент через display: grid; place-items: center
  • Применить space-between к justify-content на сетке с фиксированными столбцами
  • Использовать align-self для одного элемента внутри сетки
  • Сравнить justify-content и justify-items на одном макете
  • Создать сетку карточек с gap и padding на контейнере

Связанные темы

Ресурсы