2018-09-30 22:01:58 +00:00
---
id: 5a94fdf869fb03452672e45b
title: Align All Items Vertically using align-items
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
---
## Description
< section id = 'description' >
Using the < code > align-items< / code > property on a grid container will set the vertical alignment for all the items in our grid.
< / section >
## Instructions
< section id = 'instructions' >
Use it now to move all the items to the end of each cell.
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
- text: < code > container</ code > class should have a < code > align-items</ code > property that has the value of < code > end</ code > .
2018-10-20 18:02:47 +00:00
testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), '< code > container</ code > class should have a < code > align-items</ code > property that has the value of < code > end</ code > .');
2018-09-30 22:01:58 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```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;
/* add your code below this line */
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
/* add your code above this line */
}
< / 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 >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
var code = ".container {align-items: end;}"
```
< / section >