justify-items и align-items

justify-items и align-items — свойства Grid-контейнера, которые задают выравнивание всех дочерних элементов по горизонтальной (inline) и вертикальной (block) осям внутри их ячеек соответственно.

Зачем нужно

Когда элементы в Grid меньше своей ячейки, они по умолчанию растягиваются (stretch). Эти свойства позволяют изменить это поведение сразу для всей сетки — без задания justify-self / align-self каждому элементу вручную. Это удобно для карточных раскладок, иконок и таблиц данных.

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

  • Выравнивание карточек одинакового размера в Grid-галерее
  • Центрирование иконок или аватаров в ячейках сетки
  • Выравнивание ячеек таблицы без лишних обёрток
  • Шаблоны страниц с grid-template-areas

justify-items

Управляет выравниванием по горизонтальной оси (inline axis) — слева направо.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-items: start;   /* left — по левому краю ячейки */
}

/* Значения */
.a { justify-items: start; }    /* прижать к началу */
.b { justify-items: end; }      /* прижать к концу */
.c { justify-items: center; }   /* по центру */
.d { justify-items: stretch; }  /* растянуть (по умолчанию) */

align-items

Управляет выравниванием по вертикальной оси (block axis) — сверху вниз.

.grid {
  display: grid;
  grid-template-rows: repeat(2, 150px);
  align-items: center; /* вертикальное центрирование в строке */
}

/* Значения */
.a { align-items: start; }
.b { align-items: end; }
.c { align-items: center; }
.d { align-items: stretch; }  /* по умолчанию */
.e { align-items: baseline; } /* по базовой линии текста */

Оба свойства вместе

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 120px);
  gap: 16px;

  justify-items: center; /* горизонтально по центру */
  align-items: center;   /* вертикально по центру */
}

<div class="grid">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
</div>

Shorthand для обоих: place-items: <align-items> <justify-items>. Подробнее — place-items и place-content.

Отличие от justify-content / align-content

Свойство Что выравнивает
justify-items Содержимое каждого элемента внутри ячейки
justify-content Все треки сетки внутри контейнера

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

  1. Применение к Flexbox — justify-items не работает в flex-контейнере; для flex используйте justify-content и align-items с другой семантикой.
  2. Путаница с justify-content — justify-items двигает элемент внутри его ячейки; justify-content двигает колонки внутри всей сетки.
  3. stretch исчезает неожиданно — если задать width или height элементу, stretch перестаёт работать.

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

Ресурсы