Выравнивание каждого элемента по основной оси внутри ячейки (justify-items)link

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

Данный модификатор определяет, как элементы внутри каждой ячейки сетки или флекс-контейнера будут выравниваться по основной оси.

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

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

Синтаксисlink

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

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

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

  • items-main-start – каждый элемент прижимается к началу ячейки вдоль основной оси;
  • items-main-end – каждый элемент прижимается к концу ячейки вдоль основной оси;
  • items-main-center – каждый элемент выравнивается по центру ячейки вдоль основной оси;
  • items-main-stretch – каждый элемент растягивается по всей доступной длине ячейки вдоль основной оси.

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

<div class="grid grid-col-3 items-main-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

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

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