Грид-разметка CSS: макет Holy Grail

Development | Amber | Комментировать запись

Holy Grail — это очень распространенный в Интернете шаблон макета. Он включает в себя заголовок, область основного контента (где навигация и боковая панели имеют фиксированную ширину и находятся слева и справа соответственно, а контент – посередне), а также нижний колонтитул.

Макет Holy Grail был создан с помощью различных методов, наиболее известным из которых стал Flexbox. CSS Grid Layout — это еще один метод. Именно он является наиболее подходящим и простым методом, если вы работаете с браузером с хорошей поддержкой. Grid Layout был разработан специально для легкого создания полноразмерных макетов страниц.

Пример

Если ваш браузер поддерживает такое, тут вы сможете просмотреть живую демонстрацию данного макета.

Разметка

Разметка сама по себе действительно проста, она включает в себя минимальное количество необходимых элементов:

<div class="container">
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <!-- Navigation -->
  </nav>

  <main>
    <!-- Main content -->
  </main>

  <aside>
    <!-- Sidebar / Ads -->
  </aside>

  <footer>
    <!-- Footer content -->
  </footer>
</div>

Сетка

Вот так мы определяем сетку в контейнере при помощи единицы fr:

container {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";

  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

Обратите внимание на height: 100vh (100% высоты области просмотра) в контейнере – это позволяет расширить сетку до полной высоты области просмотра. Средний ряд сетки имеет высоту 1fr: так он сможет занять дополнительное пространство, когда это необходимо.

Элементы сетки

Разместить на сетке элементы очень просто с помощью свойства grid-area:

header {
  grid-area: header;
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
}

footer {
  grid-area: footer;
}

Бонус: отзывчивый макет

При помощи медиа-запросов и пары изменений в свойствах контейнера сетки вы можете легко свернуть все в один столбец на небольших устройствах:

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "side"
      "footer";

    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Header */
      minmax(75px, auto) /* Nav */
      1fr /* Content */
      minmax(75px, auto) /* Sidebar */
      auto; /* Footer */
  }

  nav, aside {
    margin: 0;
  }
}

Grid и Flexbox

Grid не является полной заменой Flexbox, и Flexbox по-прежнему остается правильным средством для создания одномерных и микромакетов. Комбинировать грид-раскладку и flexbox очень легко, и они изначально разработаны так, чтобы хорошо взаимодействовать.

Например, вы можете использовать flexbox в заголовке, чтобы элементы внутри контейнера заголовка были равномерно распределены по горизонтальной оси:

header {
  grid-area: header;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

Читайте также: Основы работы с CSS Flexbox