place-items и place-content

place-items и place-content — shorthand-свойства Grid (и Flex) для одновременной установки выравнивания по обеим осям: place-items комбинирует align-items и justify-items, place-content — align-content и justify-content.

Зачем нужно

Вместо двух строк кода — одна. Особенно полезно для центрирования: place-items: center заменяет align-items: center; justify-items: center. Делает код компактнее и читаемее.

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

  • Быстрое центрирование в Grid или Flex
  • Выравнивание карточек в сетке по обеим осям
  • Шаблоны с grid-template-areas где нужно полное выравнивание

place-items

Shorthand для align-items + justify-items.

/* Синтаксис */
place-items: <align-items> <justify-items>;
/* Если одно значение — применяется к обоим */
place-items: center; /* = align-items: center; justify-items: center */

/* Примеры */
.grid {
  display: grid;
  place-items: center;        /* центрировать содержимое всех ячеек */
  place-items: start end;     /* top left → bottom right */
  place-items: stretch;       /* растянуть (по умолчанию) */
}

place-content

Shorthand для align-content + justify-content. Управляет распределением самих треков в контейнере.

/* Синтаксис */
place-content: <align-content> <justify-content>;

.grid {
  display: grid;
  height: 400px;
  place-content: center;             /* треки по центру */
  place-content: space-between;      /* оба: space-between */
  place-content: start space-between; /* строки вверху, колонки с промежутком */
}

Практический пример: центрирование элемента

/* Самый короткий способ центрировать в Grid */
.wrapper {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

<div class="wrapper">
  <div class="modal">Модальное окно</div>
</div>

Сравнение: что чем управляет

Свойство Что выравнивает
place-items Содержимое элементов внутри ячеек
place-content Треки (строки/колонки) внутри контейнера
place-self Конкретный элемент внутри его ячейки

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

  1. place-items вместо place-content — если сетка не занимает весь контейнер, нужно place-content для перемещения треков.
  2. Не работает в старых браузерах — place-items поддерживается с Chrome 59, Firefox 45; проверьте на caniuse.com.
  3. Порядок значений — первое значение всегда align-* (block/вертикаль), второе — justify-* (inline/горизонталь).

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

Ресурсы