Нам нужно расположить логотип и заголовок в шапке в две колонки. Мы сделали шапку грид-контейнером, однако нескольких колонок не появилось. Всё потому, что по умолчанию грид-контейнер одноколоночный.

Чтобы это изменить, нужно описать шаблон грид-контейнера. Для этого используют свойство grid-template-columns:

.grid-container {
  display: grid;
  grid-template-columns: 100px 150px 80px;
}

Код в примере разобьёт содержимое грид-контейнера на три колонки шириной 100, 150 и 80 пикселей. Грид-элементы автоматически распределятся по колонками слева направо.

В шапке нам нужно получить две колонки шириной 210 и 200 пикселей:

Потренируемся использовать свойство grid-template-columns, а после разделим содержимое шапки на колонки правильного размера.