<div id="description">
  <h2>Приклад 1: Динамічний макет сайту</h2>
  <p>Змінюй розмір вікна браузера, щоб побачити, як елементи адаптуються.</p>
  <p>Функція fit-content() забезпечує те, що ширина елемента .content автоматично адаптується до його вмісту, але не перевищує 80% доступного простору, що дозволяє контенту бути відображеним зручно та ефективно всередині макету сайту.</p>
</div>
<div id="result">
  <div class="grid">
    <div class="header">Заголовок</div>
    <div class="sidebar">Бічна панель</div>
    <div class="content">Контент</div>
    <div class="footer">Футер</div>
  </div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: auto;
  grid-gap: 10px;
  background-color: #f0f0f0;
  padding: 20px;
}

.header,
.sidebar,
.content,
.footer {
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
}

.header {
  grid-column: 1 / -1;
}

.sidebar {
  grid-row: 2 / span 2;
}

.footer {
  grid-column: 1 / -1;
}

.content {
  grid-column: 2 / -2;
  width: fit-content(80%);
  margin: 0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.