Размещение элементов по обеим осям (place-items)link

https://dev.ru.simai.io/ru/ui/utility/grid-flex/place-items.php

Модификаторы из этого раздела задают одновременное выравнивание элементов сетки или флексбокса в ячейках относительно обеих осей одновременно.

Таблица классовlink

Класс	Значение
.items-start	place-items: start;
.items-end	place-items: end;
.items-center	place-items: center;
.items-stretch	place-items: stretch;

(Обратите внимание, что в исходном коде был класс items-text-center, но по описанию это items-center.)

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

• Контрольная точка (необязательный параметр):
  Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
  Если не указана, модификатор применяется для всех размеров.

• Модификатор (обязательный параметр):

  • items-start – элементы выравниваются в начале ячеек по обеим осям;
  • items-end – элементы выравниваются в конце ячеек по обеим осям;
  • items-center – элементы выравниваются по центру ячеек по обеим осям;
  • items-stretch – элементы растягиваются, занимая всё доступное пространство ячеек по обеим осям.

Пример использованияlink

<div class="grid grid-col-3 items-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

В данном примере элементы будут выровнены по центру ячеек сразу по обеим осям.

Адаптивностьlink

Для адаптивного изменения выравнивания элементов, начиная с определённого размера экрана, добавьте контрольную точку:

<div class="md:items-start">
  <!-- Начиная с md элементы будут прижаты к началу ячеек по обеим осям -->
</div>