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

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

// Такой код не сработает
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, браузер его проигнорирует, и вёрстка может сломаться.

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

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

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