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

Чтобы поправить карточку, нужно изменить визуальный порядок элементов. Мы уже знакомы со свойством order, но в данном случае удобнее будет не переставлять отдельные элементы, а описать шаблон карточки целиком, используя грид-области.

Грид-областью называют часть сетки грид-контейнера, у которой может быть имя. Имя области придумывает сам разработчик. Оно должно начинаться с буквы и может включать цифры, дефис и знак подчёркивания. Например: header, section-2, user_avatar. Следует выбирать такие имена, которые описывают содержимое области.

Используем грид-области, чтобы разместить элементы как на макете. Пойдём по порядку и сначала создадим грид-области для заголовка и блока с ценой. Им подойдут имена title и price.

Чтобы описать структуру грида с помощью областей, используют свойство grid-template-areas. В нём указывают имена грид-областей. При этом каждый ряд оборачивают в кавычки, а колонки разделяют пробелом. Если требуется растянуть область на несколько колонок, её имя повторяют нужное число раз.

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

.card {
  display: grid;
  grid-template-columns: 260px 165px 75px;
  grid-template-areas: "title title price";
}

Однако просто описать шаблон недостаточно, ведь браузер не знает, какие элементы мы имеем в виду. Чтобы связать имя области с соответствующим грид-элементом, используют свойство grid-area. Обратите внимание, в grid-area кавычки не нужны!

.title {
  grid-area: title;
}

.price {
  grid-area: price;
}

Этот код свяжет заголовок с областью title, а блок с ценой — с областью price. В результате оба элемента расположатся так, как описано в grid-template-areas, невзирая на их порядок в разметке.

Итак, опишем первый ряд карточки с помощью grid-template-areas, а после назначим подходящие имена заголовку и блоку с ценой. Заодно убедимся, что растягивать заголовок с помощью grid-column больше не нужно.

h1 {
  grid-area: title;
}