Контейнер (container)link

https://dev.ru.simai.io/ru/ui/utility/layout/container.php

Контейнер используется для ограничения ширины и добавления горизонтальных отступов в зависимости от размера области просмотра. По умолчанию ширина контейнера устанавливается в 100%, а также добавляется внутренний отступ, чтобы контент не прилегал плотно к краям.

Размеры и отступы контейнера зависят от контрольной точки:

Класс	Контрольная точка	Значение
container	нет	width: 100%; padding-left: var(`--sf-space-1`); padding-right: var(`--sf-space-1`);
	sm	width: var(`--sf-breakpoint-sm`); padding-left: var(`--sf-space-2`); padding-right: var(`--sf-space-2`);
	md	width: var(`--sf-breakpoint-md`); padding-left: var(`--sf-space-3`); padding-right: var(`--sf-space-3`);
	lg	width: var(`--sf-breakpoint-lg`); padding-left: var(`--sf-space-4`); padding-right: var(`--sf-space-4`);
	xl	width: var(`--sf-breakpoint-xl`); padding-left: var(`--sf-space-5`); padding-right: var(`--sf-space-5`);
	xxl	width: var(`--sf-breakpoint-xxl`); padding-left: var(`--sf-space-6`); padding-right: var(`--sf-space-6`);

Контрольные точки (--sf-breakpoint-sm, --sf-breakpoint-md, --sf-breakpoint-lg, --sf-breakpoint-xl, --sf-breakpoint-xxl) определены в ядре фреймворка, а размеры отступов (--sf-space-*) соответствуют новой системе размеров отступов.

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

<div class="container">
  ... ваш контент ...
</div>

В данном примере при любой ширине окна контейнер будет занимать 100% и иметь горизонтальные отступы равные var(--sf-space-1).

Чтобы при увеличении размера окна контейнер принимал соответствующее ограничение ширины и отступы, используйте адаптивный модификатор, например md:container для включения контейнера начиная с контрольной точки --sf-breakpoint-md:

<div class="md:container">
  ... ваш контент ...
</div>

В этом случае до достижения ширины --sf-breakpoint-md элемент будет на всю ширину без отступов по умолчанию (или использоваться базовый вариант container), а после --sf-breakpoint-md контейнер автоматически применит ограничения и отступы для этой контрольной точки.

Для центрирования контейнера можно добавить классы отступов с отрицательными значениями или класс m-right-auto m-left-auto (автоматические отступы справа и слева):

<div class="container m-right-auto m-left-auto">
  ... ваш контент ...
</div>

Таким образом, контейнер помогает поддерживать адаптивный и аккуратный макет сайта, изменяя свои размеры и отступы в зависимости от ширины области просмотра.