Контейнер в верстке

Что такое фиксированная ширина контента?

Прежде чем приступать, стоит определиться с основными понятиями.

Все, что содержит в себе сайт, условно можно поделить на две составляющие:

• Смысловое наполнение сайта. Это информация. То есть текст, картинки, заголовки и так далее.

• Декоративное наполнение. Это различные декоративные вещи, которые служат как оформление.

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

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

Взглянем на типичный сайт

макет сайта

Красная область в данном случае - это контент сайта. И мы можем наблюдать, что он расположен по центру экрана.

Такой подход в современном мире применяют практически все сайты.

Зачем это делается? Все просто. Согласно различным исследованиям и для упрощения пользовательского опыта, основной контент сайта, на котором должно быть сконцентрировано внимание пользователя, обычно располагают по центру экрана. Чтобы его внимание было сосредоточенным и не расфокусировалось. Также стоит учесть, что размеры экранов могут быть различные.

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

Как это обычно реализовывается?

Best practice для реализации такого подхода является следующей.

Для секции с контентом (то есть для блока, в котором он находится), ширина не указывается, и так как обычно секцию объявляют или тегом div, или тегом section, то она будет 100% ширины родителя. В эту секцию мы вкладываем div с классом container и прописываем ему следующие свойства:

.container {
  width: 1200px;
  margin: 0 auto;
}

Таким образом, чтобы повторить вышеуказанный пример, HTML разметка будет иметь следующий вид:

<section> // данной секции мы указываем паддинги, фон, и прочее
  <div class="container"> // данный див и класс служат для центрирования контента
    А тут будут остальные теги...
  </div>
</section>

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

Название класса container - общепринятое, и желательно не использовать его для других целей, чтобы не усложнять поддержку сайта в будущем.

Почему в коде прописана ширина 1200px? В данном коде - для примера. Обычно ширина, за которую не выходит контент, видна или на макете, или четко прописана в техническом задании. Дизайнеры обычно делают ее от 960 до 1200 пикселей.

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

.container {
  width: 90%; // ширина может быть другая, в зависимости от поведения контента на разных разрешениях
  max-width: 1200px; // устанавливаем максимальную ширину для больших экранов
  margin: 0 auto;
}

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