Список ссылок выглядит как на макете. Теперь займёмся логотипом. Это ещё одна ссылка, внутри неё находится изображение:

<a class="logo" href="#">
  <img src="img/hiking-club.svg" alt="Логотип Hiking Club">
</a>

Нам нужно отцентровать логотип по вертикали.

Ссылка-логотип и список — грид-элементы внутри контейнера navigation. По умолчанию грид-элементы начинаются у верхней границы родительского элемента и занимают всё доступное пространство по высоте.

Главная

Маршруты

Экипировка

Такое поведение можно изменить с помощью свойства align-items. Оно задаётся грид-контейнеру и управляет выравниванием грид-элементов по вертикали.

.grid-container {
  display: grid;
  align-items: start;
}

У align-items могут быть следующие значения:

• stretch — значение по умолчанию; элементы начинаются у верхней границы и растягиваются на всю высоту.
• start — элементы выстраиваются по верхней границе и, если содержимого немного, не тянутся на всю высоту;
• end — элементы выстраиваются по нижней границе;
• center — элементы располагаются по центру;

Потренируемся использовать align-items, а затем отцентруем логотип по вертикали.

После этого протестируем нашу навигацию. Тестирование — неотъемлемый этап вёрстки. Но при работе с микросетками он особенно важен, потому что содержимое и размеры компонентов могут меняться. Чтобы протестировать навигацию, добавим в список ещё несколько элементов.