Grid: макет страницы (page layout)

Grid-макет страницы — использование CSS Grid для построения общей структуры страницы с header, footer, sidebar и основным контентом.

Зачем нужно

CSS Grid — идеальный инструмент для макета страницы: двумерная раскладка с явными строками и колонками, именованные области читаемы как схема, адаптивность достигается переопределением grid-template-areas. Это современная замена float-раскладкам и Bootstrap-колонкам.

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

  • Любой сайт с шапкой, подвалом и боковой панелью
  • Документационные сайты
  • Блоги и новостные сайты
  • Маркетинговые лендинги

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

Полная страница с named areas

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-content { grid-area: content; }
.page-footer  { grid-area: footer; }

Без sidebar

.simple-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Полноширинный header + ограниченный контент

/* Паттерн с "full bleed" */
.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(24px, 1fr)
    [content-start] minmax(0, 1200px)
    [content-end] minmax(24px, 1fr)
    [full-end];
}

.full-width {
  grid-column: full;  /* от края до края */
}

.contained {
  grid-column: content; /* ограниченная ширина */
}

Адаптивный макет

/* Мобиль: одна колонка */
.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
  min-height: 100vh;
}

/* Планшет и выше */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar content"
      "footer  footer";
  }
}

/* Широкий: с правым aside */
@media (min-width: 1200px) {
  .page {
    grid-template-columns: 200px 1fr 160px;
    grid-template-areas:
      "header  header  header"
      "sidebar content aside"
      "footer  footer  footer";
  }

  .page-aside { display: block; }
}

.page-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 64px;            /* Высота header */
  height: calc(100vh - 64px);
  overflow-y: auto;
}

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

  • grid-template-areas — опечатки — имена чувствительны к регистру; ошибка в имени = элемент не позиционируется
  • min-height: 100vh без grid-template-rows — без явных строк Grid не растягивает middle-ряд до нужной высоты
  • position: sticky sidebar в Grid — нужен overflow: auto НЕ на контейнере (иначе sticky ломается)

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

Ресурсы