Layout (контейнер)

Максимальная ширина контейнера ограничена переменной $layout_max_width (по умолчанию 1200px), либо css-переменной --layout-max-width. Внутренние (padding) отступы (left и right) wrap-блока задаются в переменной $layout_wrap_padding или css-переменной --layout-wrap-padding (по умолчанию 15px).

Класс layout-center

Ограничивает блок указанной шириной и центрируется по горизонтали.

<div class="layout-center" style="--layout-max-width: 600px">содержимое</div>

Классы layout-center-wrap и layout-wrap

Контейнер с wrap-блоком, который ограничен по указанной ширине.

<div class="layout-center-wrap bg-pink200" style="--layout-max-width: 600px">
    <div class="layout-wrap bg-pink300">
        содержимое layout-wrap
    </div>
</div>

Классы layout-center-wrap-XXX и layout-wrap

Аналогичный контейнер, где максимальная ширина и суффикс класса задаётся в $layout_max_width_list.

<div class="layout-center-wrap-tablet bg-pink200">
    <div class="layout-wrap bg-pink300">
        содержимое layout-wrap tablet = 768px
    </div>
</div>

<div class="layout-center-wrap-phone bg-pink200">
    <div class="layout-wrap bg-pink300">
        содержимое layout-wrap phone = 667px
    </div>
</div>