Grid: Holy Grail Layout

Holy Grail на Grid — классический макет с header, footer, main и двумя боковыми колонками, реализованный через grid-template-areas за несколько строк.

Зачем нужно

Grid решает Holy Grail Layout элегантнее Flexbox: grid-template-areas описывает раскладку текстом, читаемым даже без CSS-знаний. Адаптивность добавляется переопределением grid-template-areas в медиазапросе. Это самый наглядный пример силы Grid.

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

  • Административные панели
  • Документационные сайты (nav + content + aside)
  • Новостные сайты и блоги с боковыми колонками
  • SaaS-интерфейсы

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

Разметка

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

CSS с grid-template-areas

.page {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
  min-height: 100vh;
  gap: 0;
}

.header       { grid-area: header; }
.sidebar-left { grid-area: sidebar; }
.main         { grid-area: main; }
.sidebar-right{ grid-area: aside; }
.footer       { grid-area: footer; }

Стилизация

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

.sidebar-left {
  background: #f5f5f5;
  padding: 16px;
}

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

.sidebar-right {
  background: #fafafa;
  padding: 16px;
}

.footer {
  background: #333;
  color: white;
  padding: 16px 24px;
}

Адаптивная версия

/* Мобиль: одна колонка */
@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
  }
}

/* Планшет: без правого aside */
@media (min-width: 768px) and (max-width: 1024px) {
  .page {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
  }

  .sidebar-right { display: none; }
}

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

  • Неправильное количество ячеек в grid-template-areas — каждая строка должна иметь одинаковое число имён; пустую ячейку обозначают точкой: . main .
  • grid-area и опечатки — имя в grid-area должно точно совпадать с именем в grid-template-areas
  • 1fr без min-height: 100vh — ряд 1fr растягивается только если у контейнера есть высота

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

Ресурсы