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

Потом опишем шаблон. Дисклеймер и описание тарифа нужно растянуть на две колонки. Мы уже знаем, как это сделать. Но обратите внимание на список опций — его нужно переместить в первую колонку и растянуть на два ряда.

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

grid-template-areas: "title title price"
                     "options description description";

Чтобы растянуть область на несколько рядов, достаточно повторить её имя в разных рядах. Нам нужно растянуть список опций на два ряда:

grid-template-areas: "title title price"
                     "options description description"
                     "options disclaimer disclaimer";

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

Работу с описанием тарифа и дисклеймером закончим в следующем задании.