---
id: 5a94fe1369fb03452672e45d
title: Place Items in Grid Areas Using the grid-area Property
challengeType: 0
videoUrl: ''
localeTitle: 使用网格区域属性在网格区域中放置项目
---
## Description
为网格容器创建区域模板后,如上一个挑战所示,您可以通过引用您提供的名称将项目放入自定义区域。为此,您可以在项目上使用grid-area
属性,如下所示: .item1 {grid-area:header; }
这使网格知道您希望item1
类进入名为header
的区域。在这种情况下,该项将使用整个顶行,因为整行被命名为标题区域。
## Instructions
使用grid-area
属性将具有item5
类的元素放置在footer
区域中。
## Tests
```yml
tests:
- text: item5
类应该有一个grid-area
属性,其值为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
// solution required
```