Размещение содержимого по обеим осям (place-content)link

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

Модификаторы из этого раздела задают одновременное выравнивание содержимого сетки или флексбокса сразу по двум осям ( основной и поперечной).

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

Класс Значение
.content-center place-content: center;
.content-start place-content: start;
.content-end place-content: end;
.content-between place-content: space-between;
.content-around place-content: space-around;
.content-evenly place-content: space-evenly;
.content-stretch place-content: stretch;

Синтаксисlink

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

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

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

    • content-center – элементы располагаются по центру контейнера как по основной, так и по поперечной оси;
    • content-start – элементы прижаты к началу обеих осей контейнера;
    • content-end – элементы прижаты к концу обеих осей контейнера;
    • content-between – элементы распределены так, что расстояние между соседними элементами одинаковое, первый элемент прижат к началу, а последний – к концу осей;
    • content-around – элементы распределены так, что свободное пространство есть и между элементами, и по краям осей, причём пространство по краям вдвое меньше, чем между элементами;
    • content-evenly – элементы распределены равномерно по обеим осям, расстояние одинаковое и между элементами, и от краёв осей;
    • content-stretch – элементы растянуты, занимая доступное пространство по обеим осям.

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

<div class="grid grid-col-3 content-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

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

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

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

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