---
id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
---
## Description
You can group cells of your grid together into an area and give the area a custom name. Do this by using grid-template-areas
on the container like this:
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
The code above merges the top three cells together into an area named header
, the bottom three cells into a footer
area, and it makes two areas in the middle row; advert
and content
.
Note
Every word in the code represents a cell and every pair of quotation marks represent a row.
In addition to custom labels, you can use a period (.
) to designate an empty cell in the grid.
## Instructions
Place the area template so that the cell labeled advert
becomes an empty cell.
## Tests
```yml
tests:
- text: container
class should have a grid-template-areas
property similar to the preview but has .
instead of the advert
area.
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