---
id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template
challengeType: 0
videoUrl: ''
localeTitle: Разделите сетку в шаблон области
---
## Description
Вы можете группировать ячейки вашей сетки вместе в область и присваивать области свое имя. Сделайте это, используя области grid-template-areas
в контейнере следующим образом: Сетка-шаблон-направления:
"заголовок заголовка заголовка"
«контент содержания рекламы»
«нижний колонтитул нижнего колонтитула»;
Приведенный выше код объединяет три верхние ячейки вместе в header
, нижние три ячейки в область нижнего footer
, и он делает две области в средней строке; advert
и content
. Заметка
Каждое слово в коде представляет собой ячейку, и каждая пара кавычек представляет собой строку. В дополнение к пользовательским ярлыкам вы можете использовать период ( .
) Для обозначения пустой ячейки в сетке.
## Instructions
Поместите шаблон области так, чтобы ячейка, помеченная advert
стала пустой ячейкой.
## Tests
```yml
tests:
- text: 'класс container
должен иметь свойство grid-template-areas
подобное представлению, но имеет .
вместо области advert
.'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "container
class should have a grid-template-areas
propertiy similar to the preview but has .
instead of the advert
area.");'
```
## Challenge Seed
## Solution
```js
// solution required
```