d781c63fdf
* chore: resolve bengali issues * chore: resolve french issues * chore: resolve hebrew issues * chore: resolve persian issues * chore: resolve portuguese brazilian issues * chore: resolve russian issues * chore: resolve spanish issues * chore: resolve japanese issues
87 lines
2.0 KiB
Markdown
87 lines
2.0 KiB
Markdown
---
|
|
id: 5a94fe1369fb03452672e45d
|
|
title: Place Items in Grid Areas Using the grid-area Property
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
|
|
forumTopicId: 301132
|
|
dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
|
---
|
|
|
|
# --description--
|
|
|
|
After creating an area 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:
|
|
|
|
```css
|
|
.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.
|
|
|
|
# --hints--
|
|
|
|
`item5` class should have a `grid-area` property that has the value of `footer`.
|
|
|
|
```js
|
|
assert(
|
|
__helpers
|
|
.removeCssComments(code)
|
|
.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<style>
|
|
.item1{background:LightSkyBlue;}
|
|
.item2{background:LightSalmon;}
|
|
.item3{background:PaleTurquoise;}
|
|
.item4{background:LightPink;}
|
|
|
|
.item5 {
|
|
background: PaleGreen;
|
|
/* Only change code below this line */
|
|
|
|
|
|
/* Only change code above this line */
|
|
}
|
|
|
|
.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"
|
|
"advert content content"
|
|
"footer footer footer";
|
|
}
|
|
</style>
|
|
|
|
<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>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<style>.item5 {grid-area: footer;}</style>
|
|
```
|