---
id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template
challengeType: 0
videoUrl: ''
localeTitle: Divide la cuadrícula en una plantilla de área
---
## Description
Puede agrupar las celdas de su cuadrícula en un área y darle al área un nombre personalizado. Haga esto usando grid-template-areas
en el contenedor de esta manera: cuadrícula-plantillas-áreas:
"encabezado encabezado encabezado"
"contenido del contenido del anuncio"
"pie de página pie de página";
El código anterior combina las tres celdas superiores juntas en un área llamada header
, las tres celdas inferiores en un área de footer
, y forma dos áreas en la fila central; advert
y content
. Nota
Cada palabra en el código representa una celda y cada par de comillas representa una fila. Además de las etiquetas personalizadas, puede usar un punto ( .
) Para designar una celda vacía en la cuadrícula.
## Instructions
Coloque la plantilla de área para que la celda etiquetada como advert
convierta en una celda vacía.
## Tests
```yml
tests:
- text: 'container
clase container
debe tener una propiedad de grid-template-areas
similar a la vista previa, pero tiene .
En lugar del área de 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
```