Адаптивный классический макет «Святая Грааль» с несколькими колонками

Условие

Разработать классическую многоколоночную вёрстку (Holy Grail Layout), включающую шапку, основной контент, две боковые колонки и подвал, с поддержкой адаптации под разные размеры экранов.

Ответ

Используйте CSS Grid: шапка и подвал занимают всю ширину, средняя строка содержит левую колонку, основной контент и правую. На узком экране перестройте сетку в один столбец.

<div class="layout">
  <header>Шапка</header><main>Основной контент</main>
  <nav>Навигация</nav><aside>Дополнительно</aside><footer>Подвал</footer>
</div>

body { margin: 0; }
.layout {
  min-height: 100dvh; display: grid; gap: 16px;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 'header header header' 'nav main aside' 'footer footer footer';
}
header { grid-area: header; }
main { grid-area: main; min-width: 0; }
nav { grid-area: nav; }
aside { grid-area: aside; }
footer { grid-area: footer; }
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas: 'header' 'main' 'nav' 'aside' 'footer'; }
}

Контент расположен раньше боковых блоков в DOM; визуальное расположение на desktop задают области сетки. minmax(0, 1fr) помогает не раздувать центральную колонку длинным содержимым.