2018-09-30 22:01:58 +00:00
---
id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
2019-08-05 16:17:33 +00:00
forumTopicId: 301130
2021-01-13 02:31:00 +00:00
dashedName: divide-the-grid-into-an-area-template
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
You can group cells of your grid together into an < dfn > area</ dfn > and give the area a custom name. Do this by using `grid-template-areas` on the container like this:
2019-05-14 08:11:58 +00:00
```css
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
```
2020-11-27 18:02:05 +00:00
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.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Place the area template so that the cell labeled `advert` becomes an empty cell.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
`container` class should have a `grid-template-areas` property similar to the preview but has `.` instead of the `advert` area.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
__helpers
.removeCssComments(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
)
);
```
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
2020-02-27 15:20:46 +00:00
/* Only change code below this line */
2018-09-30 22:01:58 +00:00
"header header header"
"advert content content"
"footer footer footer";
2020-02-27 15:20:46 +00:00
/* Only change code above this line */
2018-09-30 22:01:58 +00:00
}
< / style >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< div class = "container" >
< div class = "item1" > 1< / div >
< div class = "item2" > 2< / div >
< div class = "item3" > 3< / div >
< div class = "item4" > 4< / div >
< div class = "item5" > 5< / div >
< / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2018-10-23 13:21:53 +00:00
```html
< style >
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
". content content"
"footer footer footer";
}
< / style >
2018-09-30 22:01:58 +00:00
2018-10-23 13:21:53 +00:00
< div class = "container" >
< div class = "item1" > 1< / div >
< div class = "item2" > 2< / div >
< div class = "item3" > 3< / div >
< div class = "item4" > 4< / div >
< div class = "item5" > 5< / div >
< / div >
2018-09-30 22:01:58 +00:00
```