Колонка с контентом по центру экрана

Колонка с контентом определённой ширины по центру экрана — частый паттерн в веб-дизайне. В этом рецепте разберём, как и какими способами можно это сделать. Также рассмотрим ситуацию, когда некоторые секции должны быть растянуты на весь экран.

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

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

Можно использовать класс в любом нужном месте:

        
          
          <header class="header">  <div class="container">    <h1>Привет, мир!</h1>  </div></header>
          <header class="header">
  <div class="container">
    <h1>Привет, мир!</h1>
  </div>
</header>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Стили для класса container:

        
          
          .container {  max-width: 1024px;  margin-left: auto;  margin-right: auto;}
          .container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

В примере значение 1024px служит для ограничения контента, больше чем 1024px контент не будет растягиваться и выходить за эти рамки, а свойство margin расположит блок с контентом по центру экрана по горизонтали.

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

        
          
          .container {  max-width: 1024px;  margin-left: auto;  margin-right: auto;}@media (max-width: 1024px) {  .container {    padding-left: 128px;    padding-right: 128px;  }}@media (max-width: 768px) {  .container {    padding-left: 64px;    padding-right: 64px;  }}@media (max-width: 425px) {  .container {    padding-left: 24px;    padding-right: 24px;  }}
          .container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .container {
    padding-left: 128px;
    padding-right: 128px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (max-width: 425px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Пример разметки:

        
          
          <header class="header">  <div class="container">    <!-- Контент -->  </div></header><section class="section contacts">  <div class="container">    <!-- Контент -->  </div></section>
          <header class="header">
  <div class="container">
    <!-- Контент -->
  </div>
</header>
<section class="section contacts">
  <div class="container">
    <!-- Контент -->
  </div>
</section>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

Так же можно не писать несколько медиазапросов, а воспользоваться функцией clamp() и рассчитывать нужную ширину .container для каждой ширины экрана.

В этом примере в первую и третью секции вложен блок с классом container, контент в них будет ограничен по ширине и размещён по центру экрана. А во второй секции не будет вложен .container и контент будет растянут на всю ширину экрана.

        
          
          <section class="section-one">  <div class="container">    <!-- Контент -->  </div></section><section class="section-two">  <!-- Контент --></section><section class="section-third">  <div class="container">    <!-- Контент -->  </div></section>
          <section class="section-one">
  <div class="container">
    <!-- Контент -->
  </div>
</section>
<section class="section-two">
  <!-- Контент -->
</section>
<section class="section-third">
  <div class="container">
    <!-- Контент -->
  </div>
</section>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В стилях используем функцию clamp()

        
          
          .container {  width: clamp(360px, 90%, 1024px);  margin-left: auto;  margin-right: auto;}
          .container {
  width: clamp(360px, 90%, 1024px);
  margin-left: auto;
  margin-right: auto;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Код сократился, при этом работает как нужно.

Как именно функция clamp() рассчитывает width:

• Первый параметр 360px — задаёт минимальное значение ширины блока;
• Последний параметр 1024px — задаёт максимальное значение;
• Средний параметр 90% — применяется в тех случаях, когда нижний или верхний пределы не достигнуты.

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

Представим «макет» блога, где весь контент расположен в .container, а вот текст статей будет ещё меньше основной колонки контента. Обернём его в блок .wrapper:

        
          
          <section class="section">  <div class="container">    <h1>Заголовок для блога</h1>    <div class="wrapper">      <!-- Текст статьи -->    </div>  </div></section>
          <section class="section">
  <div class="container">
    <h1>Заголовок для блога</h1>
    <div class="wrapper">
      <!-- Текст статьи -->
    </div>
  </div>
</section>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Стилизуем любым удобным способом: через max-width или при помощи функции clamp():

        
          
          .container {  width: clamp(360px, 90%, 1024px);  margin-left: auto;  margin-right: auto;}.wrapper {  width: clamp(280px, 90%, 768px);  margin-left: auto;  margin-right: auto;}
          .container {
  width: clamp(360px, 90%, 1024px);
  margin-left: auto;
  margin-right: auto;
}

.wrapper {
  width: clamp(280px, 90%, 768px);
  margin-left: auto;
  margin-right: auto;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать