Holy Grail Layout

Классический макет «шапка — три колонки (nav + контент + aside) — футер» на CSS Grid за минимум кода.

Задача

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

Решение

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Holy Grail Layout</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="layout">
    <header class="layout__header">Шапка</header>
    <nav class="layout__nav">Навигация</nav>
    <main class="layout__main">Основной контент</main>
    <aside class="layout__aside">Сайдбар</aside>
    <footer class="layout__footer">Футер</footer>
  </div>
</body>
</html>

/* style.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
}

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 220px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.layout__header { grid-area: header; background: #1e40af; color: #fff; padding: 16px 24px; }
.layout__nav    { grid-area: nav;    background: #f1f5f9; padding: 24px 16px; }
.layout__main   { grid-area: main;   padding: 24px; }
.layout__aside  { grid-area: aside;  background: #f8fafc; padding: 24px 16px; }
.layout__footer { grid-area: footer; background: #1e293b; color: #fff; padding: 16px 24px; text-align: center; }

/* Адаптив: одна колонка на мобильном */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

Ключевые моменты

  • grid-template-areas делает разметку читаемой — видно структуру прямо в CSS.
  • grid-template-rows: auto 1fr auto — средняя строка (main) растягивается, шапка и футер прижаты к краям.
  • min-height: 100vh на .layout — футер всегда внизу экрана, даже при малом контенте.
  • Адаптив реализуется переопределением grid-template-areas в media query — логика не меняется.

Варианты

  • Flexbox-вариант: внешний контейнер — flex-direction: column, центральная часть — display: flex с тремя колонками.
  • Если не нужен aside — убери колонку, оставь две: "nav main".

Связанные рецепты / темы