CSS Grid Layout. Быстрое протипирование при помощи grid-template-areas

Стандартая страница имеет шапку, подвал, боковое меню и основной блок для вывода информации.


<div class="container">
  <div class="header">Шапка</div>
  <div class="menu">Меню</div>
  <div class="content">Основной блок</div>
  <div class="footer">Подвал</div>
</div>

Страницы принято верстать при помощи сетки, например, Bootstrap использует 12-колоночную сетку.


.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 350px 50px;
  grid-gap: 5px;
}

Мы создали сетку с двенадцатью столбцами, каждый столбец имеет ширину 1/12 от общей ширины. Контейнер содержит три ряда, где первый ряд имеет высоту 50px, второй 350px и третий 50px. Между элементами добавим небольшое пространство.

Сейчас начнётся самое интересное. Grid Layout имеет интересное свойство grid-template-areas, которое позволяет легко и быстро экспериментировать с макетом. Синтаксис может показаться немного странным:


grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";

Если вы заметили, мы создали визуальное представление макета из трёх строк с 12 символами, как было задумано раньше. Каждый символ соответствует первому символу классов в макете: h=header, m=menu, c=content, f=footer. Это не обязательное условие, так проще вам читать код.

Итак, каждый символ представляет ячейку сетки. Нужно визуализировать наш прототип. Для этого мы будем использовать свойство grid-area:


.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 350px 50px;
  grid-gap: 5px;
  grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
}

.header {
    grid-area: h;
}

.menu {
    grid-area: m;
}

.content {
    grid-area: c;
}

.footer {
   grid-area: f;
}

Основной блок

Теперь мы можем легко экспериментировать с макетом, меняя порядок символов в свойстве grid-template-areas. Например, мы хотим переместить меню в правую сторону и сделать его пошире:


grid-template-areas:
      "h h h h h h h h h h h h"
      "c c c c c c c c c m m m"
      "f f f f f f f f f f f f";

Основной блок

Для создания пустых ячеек используйте точки.


grid-template-areas:
      ". . h h h h h h h h . ."
      "m m . . c c c c c c c c"
      ". f f f f f f f f f f .";

Основной блок

Адаптивность

Макет получился простым и удобным, но не адаптивный под разные размеры устройств. Допустим, мы хотим, чтобы меню поднималось к шапке при просмотре на мобильном телефоне. Используем медиа-запрос:


@media screen and (max-width: 640px) {
    .container {
        grid-template-areas:
            "m m m m m m h h h h h h"
            "c c c c c c c c c c c c"
            "f f f f f f f f f f f f";
    }
}

Основной блок

Попробуйте изменить размеры браузера, чтобы увидеть, как меняется макет.

Вернуться в раздел о CSS Grid Layout

CSS Grid Layout. Быстрое протипирование при помощи grid-template-areas

Адаптивность

Реклама