---
id: 5a94fe1369fb03452672e45d
title: Place Items in Grid Areas Using the grid-area Property
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
---
## Description
After creating an areas template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the grid-area
property on an item like this:
.item1 { grid-area: header; }
This lets the grid know that you want the item1
class to go in the area named header
. In this case, the item will use the entire top row because that whole row is named as the header area.
## Instructions
Place an element with the item5
class in the footer
area using the grid-area
property.
## Tests
```yml
tests:
- text: item5
class should have a grid-area
property that has the value of footer
.
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), 'item5
class should have a grid-area
property that has the value of footer
.');
```
## Challenge Seed
## Solution
```js
var code = ".item5 {grid-area: footer;}"
```