Мы подключили на страницу декоративные стили и подсветили сеточные элементы. Теперь пойдём сверху вниз по макету и будем шаг за шагом выстраивать сетку страницы.

Первый сеточный элемент на странице — шапка. Она обозначается тегом <header>, который по умолчанию является блочным боксом. Внутри него находятся логотип (изображение, обёрнутое в ссылку) и заголовок.

<header class="page-header">
  <a class="logo">
    <img src="img/food_logo.svg" alt="Логотип">
  </a>
  <h1 class="header-title">Доставка правильного питания</h1>
</header>

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

Расположить элементы в две колонки можно разными способами. Мы воспользуемся гридами (от английского grid — «сетка»). Это удобная и популярная технология. И у неё неплохая браузерная поддержка.

Чтобы с помощью гридов управлять расположением логотипа и заголовка, нужно изменить тип бокса у их родителя — тега <header>. За тип бокса в CSS отвечает свойство display. У этого свойства больше десятка возможных значений, все они перечислены в спецификации.

display: grid;

Бокс с типом grid называют грид-контейнером, а дочерние, то есть непосредственно вложенные в него теги — грид-элементами.

Хотя снаружи (для других элементов, например основного содержимого) грид-контейнер ничем не отличается от блочного бокса, грид-элементы внутри него ведут себя иначе. Например, даже строчные боксы начинают занимать всю доступную им область. Кроме того, в грид-контейнере по-другому ведут себя внешние отступы у элементов.

Шапка на нашей странице — это элемент с классом page-header, используем для стилизации соответствующий селектор. Превратим шапку в грид-контейнер и посмотрим, как поведут себя грид-элементы — логотип и заголовок. А в следующем задании займёмся колонками.