Как стилизовать wrapper в CSS для адаптивного контейнера

Чтобы стилизовать wrapper в CSS, ограничьте ширину блока, добавьте боковые отступы и поставьте его по центру через автоматические margin. Такой контейнер защищает текст от слишком длинных строк и сохраняет выравнивание на узких экранах. Вы соберете базовый wrapper, настроите сетку и добавите полноэкранный фон секции.

Что такое wrapper в CSS

Wrapper, или обертка, объединяет элементы внутри общего блока. Контейнер задает границы для текста, изображений, боковой панели и основного содержимого.

Для простой страницы можно ограничить сам элемент <body>:

body {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Отдельный wrapper дает больше контроля. Фон страницы остается полноэкранным, а внутренний контент получает собственные ограничения.

HTML

<div class="wrapper">
  <aside>...</aside>
  <main>...</main>
</div>

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

Зачем странице нужен контейнер

Контейнер решает три задачи. Он ограничивает длину текста, объединяет связанные элементы и упрощает построение колонок.

• Читаемость. Текст не занимает всю ширину большого экрана.
• Отступы. Один класс задает общие границы для нескольких блоков.
• Сетка. Внутри контейнера проще расположить основной контент и боковую панель.

На маленьком экране wrapper сжимается вместе с окном. На большом он сохраняет максимальную ширину и оставляет свободное место по краям.

Как задать ширину wrapper

Начните с max-width. Свойство ограничит рост блока и позволит ему уменьшаться при нехватке места.

CSS

.wrapper {
  max-width: 1170px;
}

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

CSS

.wrapper {
  width: 1170px;
  max-width: 100%;
}

Чаще достаточно одной декларации max-width. Она сохраняет гибкость и не требует отдельного media-запроса.

Как центрировать контейнер и добавить отступы

Автоматические боковые margin делят свободное место поровну. Поэтому wrapper встает по центру родительского блока.

CSS

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

Запись margin: 0 auto дает тот же горизонтальный результат. Одновременно она обнуляет верхний и нижний margin.

Если вертикальный отступ нужен отдельно, задайте его другим классом. Полные свойства проще читать в инструментах разработчика.

Одного max-width мало. При уменьшении окна границы wrapper могут подойти вплотную к краям viewport.

CSS

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

Padding сохраняет расстояние 16px между содержимым и краями контейнера. Свойство box-sizing включает внутренние отступы в расчет ширины.

Как использовать процентную ширину

Процентная ширина оставляет свободное место по краям окна. Ограничение через max-width не дает wrapper расти бесконечно.

CSS

.wrapper {
  width: 90%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

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

Для постоянного внутреннего отступа используйте комбинацию ширины и padding:

.wrapper {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

Здесь box-sizing: border-box включает padding в ширину блока. Поэтому контейнер не выходит за пределы родителя даже при ширине окна 320px.

Как выбрать display для контейнера

Обычный div занимает строку как блочный элемент. Wrapper отвечает за ширину и внешние границы, а сетку лучше перенести во внутренний блок.

HTML

<div class="wrapper">
  <div class="featured-news">
    <!-- Элементы сетки -->
  </div>
</div>

CSS

.featured-news {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

Один wrapper можно применять на разных страницах. Его ширина не зависит от способа раскладки содержимого.

Как добавить отступ между контейнерами

Сокращенное свойство margin: 0 auto может сбросить заданный вертикальный margin. Для базового wrapper задайте горизонтальные значения отдельно.

HTML

<div class="wrapper mb-5"></div>
<section>
  <div class="wrapper"></div>
</section>

CSS

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.mb-5 {
  margin-bottom: 3rem;
}

Служебный класс меняет только нужное расстояние. Сам контейнер сохраняет одинаковые правила на страницах.

Как разместить контейнер внутри полноэкранной секции

Секцию используйте для фона на всю ширину окна. Wrapper внутри ограничит положение текста и элементов.

HTML

<section class="promo">
  <div class="wrapper">
    <h2>Заголовок секции</h2>
  </div>
</section>

CSS

.promo {
  background-color: #ccc;
}

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Цвет или изображение получает секция. Контент сохраняет ширину wrapper и не касается краев окна.

Как настроить первую секцию

Решение зависит от композиции hero-блока. Узкий контейнер подходит для заголовка и короткого описания, широкий – для изображения, карточек или нескольких колонок.

Если фон должен идти от края до края, оставьте фон на section, а текст поместите в дочерний wrapper. Декоративный элемент по всей ширине может обойтись без общего контейнера.

Для центрированного hero добавьте отдельный wrapper. Он защищает заголовок и абзац от прилипания к краям.

HTML

<section class="hero">
  <div class="hero__wrapper">
    <h2>Как испечь хлеб дома</h2>
    <p>Описание страницы.</p>
    <p><a href="/sign-up">Зарегистрироваться</a></p>
  </div>
</section>

CSS

.hero {
  text-align: center;
}

.hero__wrapper {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Без бокового padding текст может соприкоснуться с границами секции. На мобильном экране это заметно сразу.

Добавьте padding во внутренний wrapper. Секция сохранит полноэкранный фон, а содержимое получит безопасное расстояние.

Слишком широкий абзац трудно читать. Ограничьте текст отдельным контейнером с максимальной шириной.

CSS

.hero__wrapper {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Размер 720px подходит для короткого hero-текста. Для другого содержания выберите ширину по заголовку и абзацам.

Вопросы о выравнивании контейнера

Как использовать переменные CSS для вариантов контейнера

Одна переменная позволяет менять максимальную ширину без копирования основного набора правил.

HTML

<div class="wrapper"></div>

CSS

.wrapper {
  max-width: var(--wrapper-width, 1170px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Второе значение в var() – запасное. Браузер возьмет 1170px, если переменная --wrapper-width не задана.

Для узкого варианта добавьте класс:

HTML

<div class="wrapper wrapper--small"></div>

CSS

.wrapper--small {
  --wrapper-width: 720px;
}

• Базовые правила остаются в одном месте.
• Вариант получает только новое значение ширины.
• Отличие легко увидеть в инструментах разработчика.

Как работает значение contents у display

Значение display: contents убирает собственную коробку элемента из визуальной раскладки. Дочерние элементы остаются в прежней DOM-иерархии.

HTML

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <!-- Содержимое шапки -->
  </div>
</header>

CSS

.site-header__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

Если шапка должна растянуться на всю ширину, перенесите flex-правила на родительский элемент.

CSS

.site-header__wrapper {
  display: contents;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

После изменения проверьте отступы, фон, доступность и клавиатурную навигацию. Стили элемента с удаленной коробкой могут работать иначе.

Как совместить адаптивный фон и контейнер

Секция может занимать всю ширину окна, а ее содержимое – оставаться в ограниченной области. Для простого варианта задайте секции фон, а wrapper – ширину и внутренние отступы.

HTML

<section class="content-section">
  <div class="wrapper"></div>
</section>

CSS

.content-section {
  background-color: #ccc;
}

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Вместо дочернего wrapper можно рассчитать боковой padding самой секции:

CSS

.content-section {
  padding: 1rem max(1rem, calc(50% - 585px));
}

Функция max() оставляет минимум 1rem на узком экране. На широком экране второе значение расширяет боковое пространство до границы контентной области.

Какой вариант wrapper выбрать

Для большинства страниц подойдет гибкий контейнер с max-width, автоматическими боковыми margin и padding 16px. Сетку размещайте во внутреннем блоке, а полноэкранный фон оставляйте секции.

• Обычная страница. Используйте max-width, margin-left: auto и margin-right: auto.
• Hero-текст. Задайте отдельный wrapper с меньшей максимальной шириной.
• Сетка. Добавьте внутренний блок с display: grid или display: flex.
• Полноэкранный фон. Назначьте фон секции, а wrapper оставьте контейнером для содержимого.

Совет от нашей редакции: сначала соберите базовый wrapper с гибкой шириной, затем добавляйте отдельные классы для сетки, hero-блока и нестандартных отступов.