Схема триколоночного макета сайту в CSS

Створюємо триколоночний макет сайту за допомогою Flexbox: лівий sidebar, основний контент та правий sidebar.

Схема триколоночного макета сайту в CSS

Триколоночний макет складається з трьох основних областей: лівої бокової панелі, центрального контенту та правої бокової панелі.

Такий тип макета часто використовується для інформаційних сайтів, блогів та панелей керування.

HTML структура сайту

<div id="wrapper">
  <div id="header">
    header
  </div>

  <div id="container">
    <div id="left">
      left sidebar
    </div>

    <div id="content">
      content
    </div>

    <div id="right">
      right sidebar
    </div>
  </div>

  <div id="footer">
    footer
  </div>
</div>

Створення основного контейнера

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

#wrapper {
  width: 1100px;
  margin: 30px auto;
  border: 1px solid black;
}

Розташування колонок через Flexbox

Щоб три блоки розташувалися в один ряд, перетворимо container у flex-контейнер.

#container {
  display: flex;
}

Встановлення ширини колонок

Ширина всіх трьох колонок повинна дорівнювати ширині wrapper.

#content {
  width: 700px;
}

#left {
  width: 200px;
}

#right {
  width: 200px;
}

#content {
  width: 660px;
}

#left {
  width: 200px;
  margin-right: 20px;
}

#right {
  width: 200px;
  margin-left: 20px;
}

Фінальні стилі колонок

#content {
  width: 660px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}

#left {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

#right {
  width: 200px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid black;
}

Повний CSS макета

* {
  box-sizing: border-box;
}

#wrapper {
  width: 1100px;
  margin: 30px auto;
  border: 1px solid black;
}

#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

#container {
  display: flex;
}

#content {
  width: 660px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}

#left {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

#right {
  width: 200px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid black;
}

#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

❗ Важливо:

При використанні Flexbox висота колонок автоматично підлаштовується під найбільший елемент у рядку.

wrapper задає загальну ширину сайту.
container розміщує колонки в один ряд.
left — лівий sidebar.
content — основна частина сторінки.
right — правий sidebar.
Flexbox спрощує створення горизонтальних макетів.

📌 Завдання:

№1. Створіть wrapper шириною 1100px.
№2. Додайте три колонки: left, content, right.
№3. Зробіть container flex-контейнером.
№4. Додайте відступи між колонками.
№5. Додайте header та footer.

💡 Показати підказку

Сума ширини колонок і відступів повинна відповідати ширині батьківського контейнера.

✅ Показати відповідь

#container {
  display: flex;
}

#left {
  width: 200px;
}

#content {
  width: 660px;
}

#right {
  width: 200px;
}