Layout-контейнер

Контейнер используется для размещения произвольного содержимого с учетом размера браузера.

Центрирование содержимого по размеру браузера

Очень часто содержимое сайта следует ограничить по ширине и отцентрировать. Это делается из-за того, что ширина экрана и браузера достаточно большие и их следует ограничить. Применение контейнера сразу делает блок адаптивным, поскольку его ширина автоматически подстраивается под все виды экранов.

Центрирование содержимого без полей

Центрирование производится с помощью класса layout-center, который ограничивает размер контента 1200px и центрирует блок. Схематично это выглядит так:

Браузер

содержимое блока

<div class="layout-center bg-pink200">содержимое блока</div>

Здесь фон браузера остаётся без изменений, поэтому чаще всего layout-center применяется там, где блок должен иметь тот же фон, что и сам браузер <body>.

Центрирование содержимого c полями

Для управления полями, используется два вложенных блока: первый layout-center-wrap, который растягивается на всю ширину браузера и второй layout-wrap, который ограничивает максимальную ширину и центрирует контент.

Браузер

содержимое layout-wrap

<div class="layout-center-wrap bg-primary200">
    <div class="layout-wrap bg-primary300">
        содержимое layout-wrap
    </div>
</div>

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

Изменения ширины контента

Для изменения поведением layout-контейнером используются css-переменные:

:root {
    /* максимальная ширина контента */
    --layout-max-width: 1200px;
    
    /* правый и левый внутренние отступы */
    --layout-wrap-padding: 15px;
}

Контент для tablet-экранов

Если размер контейнера нужно сразу ограничить до размера «tablet» (планшеты и телефоны), то используется класс layout-center-wrap-tablet, который имеет максимальную ширину 768px.

Браузер

содержимое 768px

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

Также можно установить размеры произвольного блока с помощью классов ширины:

.w-tablet {width: 768px;}
.w-tablet-max {max-width: 768px;}
.w-tablet-min {min-width: 768px;}

содержимое 768px

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

Контейнер с тремя и более блоками

Такой подход используется для случаев, когда нужно вложить блоки друг в друга. Например первый блок — это фоновое изображения, второй — это затеняющий блок с небольшой прозрачностью и третий — уже основное содержимое.

Для блока контейнера используется flex-сетка, которая позволяет растянуть внутренний блок на всю ширину родителя. Это типовое поведение класса flex.

<div class="layout-center-wrap flex bg-no-repeat bg-position-center bg-size-cover" style="min-height: 600px; background-image: url(адрес фонового изображения);">
    <div class="w100 bg-op40">
        <div class="layout-wrap h100 flex-column flex-ac-center">
            <div class="t-pink100 t300 t-center">Lorem ipsum dolor sit amet</div>
            <div class="t-pink100 t120 t-center mar30-t">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
            <div class="t-pink100 t-center mar30-t"><a class="button button-pink" href="#">Lorem</a></div>
        </div>
    </div>
</div>

Классы bg-no-repeat bg-position-center bg-size-cover позиционируют фоновое изображение.
Класс bg-op40 устанавливает затенение в 40%.
Классы h100 flex-column flex-ac-center используется для центрирования контента. Поскольку это «flex-колонки», то используется 100% высота, а не ширина.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem