Урок 233 із 239
97%
← Назад

Схема макетів з кількома wrapper у CSS

Вивчаємо створення макетів, де фон займає всю ширину сторінки, а контент залишається по центру за допомогою декількох wrapper та center.

Схема макетів з кількома wrapper у CSS

У сучасній верстці часто зустрічаються блоки, які мають фоновий колір на всю ширину екрана, але їхній вміст повинен залишатися по центру сторінки.

Для створення такого макета одного контейнера недостатньо. Ми будемо використовувати декілька wrapper для різних секцій сторінки.

Загальна схема макета

<div class="wrapper">
  <div class="center">

  </div>
</div>

<div class="wrapper line">
  <div class="center">

  </div>
</div>

<div class="wrapper">
  <div class="center">

  </div>
</div>

<div class="wrapper line">
  <div class="center">

  </div>
</div>

Блок center для вирівнювання контенту

Клас center відповідає за фіксовану ширину блоку та його розташування по центру сторінки.

.center {
  width: 800px;
  padding: 20px;
  margin: 0 auto;
}

Блок line для фону

Клас line використовується разом із wrapper і додає фон для всієї секції.

.wrapper.line {
  background-color: #008040;
  color: white;
}

Блок wrapper

Wrapper є зовнішнім контейнером кожної секції. Він використовується для створення відступів між блоками.

.wrapper {
  margin-bottom: 30px;
}
<div class="wrapper">
  <div class="center">
    <h1>Main site header</h1>
  </div>
</div>

<div class="wrapper line">
  <div class="center">
    <h2>Our company</h2>

    <p>
      Текст про компанію.
    </p>

    <p>
      Додатковий опис компанії.
    </p>
  </div>
</div>

<div class="wrapper">
  <div class="center">
    <h2>Our price</h2>

    <p>
      Інформація про ціни.
    </p>
  </div>
</div>

<div class="wrapper line">
  <div class="center">
    <h2>Our contacts</h2>

    <p>
      Контактна інформація.
    </p>
  </div>
</div>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  margin-bottom: 30px;
}

.wrapper.line {
  background-color: #008040;
  color: white;
}

.center {
  width: 800px;
  padding: 20px;
  margin: 0 auto;
}

.wrapper h1 {
  margin: 0;
  font: 40px "Times New Roman";
}

.wrapper h2 {
  margin: 0;
  font: 25px "Times New Roman";
}

.wrapper p {
  font: 16px/1.4 Arial;
  text-align: justify;
}
❗ Важливо:

Такий підхід дозволяє легко створювати секції сайту з різними фонами, але однаковою шириною контенту.

  • wrapper відповідає за зовнішній блок секції.
  • center обмежує ширину та центрує контент.
  • line додає фоновий колір на всю ширину сторінки.
  • Один сайт може містити багато wrapper-блоків.
📌 Завдання:
  1. №1. Створіть три секції сайту через wrapper.
  2. №2. Додайте всередину кожного wrapper блок center.
  3. №3. Одній секції додайте кольоровий фон через клас line.
  4. №4. Вирівняйте контент по центру сторінки.
  5. №5. Додайте власні заголовки та текст.
💡 Показати підказку

Якщо фон повинен займати всю ширину екрана, додавайте його wrapper, а не center.

✅ Показати відповідь
.wrapper {
  margin-bottom: 30px;
}

.center {
  width: 800px;
  margin: 0 auto;
}

.wrapper.line {
  background-color: #008040;
}