Flexbox: Holy Grail Layout

Holy Grail Layout — классический макет страницы с header, footer, основным контентом и двумя боковыми колонками, реализуемый через Flexbox.

Зачем нужно

Holy Grail — исторически сложный паттерн вёрстки, ради которого использовались хаки с float и negative margin. Flexbox решает его за десяток строк кода. Изучение этого паттерна демонстрирует все ключевые возможности Flexbox: направление, рост, порядок.

Где используется

  • Административные панели с sidebar
  • Документационные сайты (nav + content + aside)
  • Блоги с боковой колонкой
  • Лендинги со сложным макетом

Основной контент

HTML-структура

<div class="page">
  <header class="header">Header</header>
  <div class="body">
    <nav class="sidebar sidebar--left">Left Nav</nav>
    <main class="main">Main Content</main>
    <aside class="sidebar sidebar--right">Right Aside</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

CSS

/* Вертикальная структура страницы */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header,
.footer {
  flex-shrink: 0; /* Не сжимаются */
}

/* Горизонтальная строка: sidebar + main + aside */
.body {
  display: flex;
  flex: 1; /* Занимает всё оставшееся вертикальное место */
}

.sidebar {
  width: 240px;
  flex-shrink: 0; /* Фиксированная ширина */
}

.main {
  flex: 1; /* Основной контент растёт */
  padding: 24px;
}

С адаптивностью

@media (max-width: 768px) {
  .body {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    order: 2; /* На мобиле sidebar ниже main */
  }

  .main {
    order: 1;
  }
}

Полный пример со стилями

* { box-sizing: border-box; margin: 0; padding: 0; }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: system-ui, sans-serif;
}

.header {
  background: #0070f3;
  color: white;
  padding: 16px 24px;
  flex-shrink: 0;
}

.body {
  display: flex;
  flex: 1;
}

.sidebar--left {
  width: 200px;
  background: #f5f5f5;
  padding: 16px;
  flex-shrink: 0;
}

.main {
  flex: 1;
  padding: 24px;
  background: white;
}

.sidebar--right {
  width: 160px;
  background: #fafafa;
  padding: 16px;
  flex-shrink: 0;
}

.footer {
  background: #333;
  color: white;
  padding: 16px 24px;
  flex-shrink: 0;
}

Частые ошибки

  • Нет min-height: 100vh на .page — страница не вытягивается на высоту экрана при малом контенте
  • flex: 1 на .body без flex-direction: column на .page — flex: 1 работает только по главной оси родителя
  • Забыт flex-shrink: 0 на sidebar — sidebar сжимается при узком viewport

Связанные темы

Ресурсы