• Теория
  • Теория

Описываем несколько рядов

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

Макет карточки

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

В 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, описав все необходимые грид-области. После этого назначим списку опций соответствующее имя области и убедимся, что он переместился в первую колонку и растянулся на два ряда.

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 29 апреля цена 21 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Продолжение» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.