Размещение элементов

place-items
sm
md
lg
xl

В SIMAI Framework с помощью модифкаторов можно управлять одновременным выравниванием элементов сетки или флексбокса в ячейках относительно основной оси.

Классы

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

Описание

Адаптивный модификатор. Задает способ одновременного выравнивания элементов сетки или флексбокса относительно основной оси в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • items-start - элементы размещаются в начале осей сетки;
    • items-end - элементы размещаются в конце осей сетки;
    • items-center - элементы размещаются в центре осей сетки;
    • items-stretch - элементы растягиваются по обеим осям сетки.

items-start

С помощью модификатора items-start можно разместить элементы в начале осей сетки.

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

items-end

С помощью модификатора items-end можно разместить элементы в конце осей сетки.

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

items-center

С помощью модификатора items-center можно разместить элементы в центре осей сетки.

1
2
3
4
5
6
<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>

items-stretch

С помощью модификатора items-stretch можно растянуть элементы по обеим осям сетки.

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

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

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

Например, используйте модификатор md:items-start для выравнивания элементов сетки или флексбокса к началу ячейки относительно основной оси для экранов размером Medium и больше. 

<div class="md:items-start"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью