---
id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template
challengeType: 0
videoUrl: ''
localeTitle: Divide a grade em um modelo de área
---
## Description
Você pode agrupar células de sua grade em uma área e dar à área um nome personalizado. Faça isso usando grid-template-areas
no contêiner da seguinte forma: áreas de modelo de grade:
"header header header"
"conteúdo do conteúdo do anúncio"
"footer footer footer";
O código acima mescla as três células principais em uma área denominada header
, as três células inferiores em uma área de footer
e cria duas áreas na linha do meio; advert
e content
. Nota
Cada palavra no código representa uma célula e cada par de aspas representa uma linha. Além de rótulos personalizados, você pode usar um ponto ( .
) Para designar uma célula vazia na grade.
## Instructions
Coloque o modelo de área para que o advert
rotulado da célula se torne uma célula vazia.
## Tests
```yml
tests:
- text: 'container
classe container
deve ter uma propriedade grid-template-areas
semelhante à visualização, mas possui .
em vez da área do 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
```