2.0 KiB
2.0 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
5a90376038fddaf9a66b5d3c | Align All Items Horizontally using justify-items | 0 | https://scrimba.com/p/pByETK/cJbpECn |
Description
justify-items
on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move all the items in our grid to the desired alignment.
Instructions
Tests
tests:
- text: <code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');
Challenge Seed
<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;
/* add your code below this line */
/* add your code above this line */
}
</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>
Solution
var code = ".container {justify-items: center;}"