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

Завершаем шаблон карточки

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

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

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

// Такой код не сработает
grid-template-areas: "logo main"
                     "main main";

// Такой – тоже
grid-template-areas: "nav logo nav";

Во-вторых, при описании шаблона количество колонок в каждом ряду должно быть одинаковым:

// Такой код не сработает
grid-template-areas: "logo nav"
                     "aside main banner"
                     "footer";

Если задать неправильное значение grid-template-areas, браузер его проигнорирует, и вёрстка может сломаться.

Наконец, имена областей в одном контейнере должны быть уникальными. Если задать одинаковое имя нескольким элементам, они наложатся друг на друга. По этой причине грид-области не подойдут, например, для списка карточек, особенно если количество этих карточек неизвестно заранее.

Зато области удобно использовать, если элементов в гриде немного и точно известно, как они должны располагаться. Подробнее о грид-областях рассказано в спецификации. А ещё вы можете потренироваться использовать их, пройдя часть «Знакомство с гридами».

Итак, зададим имена областей описанию и дисклеймеру.

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

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

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

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

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

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