1.7 KiB
1.7 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
5a858944d96184f06fd60d61 | Create Your First CSS Grid | 0 | https://scrimba.com/p/pByETK/cqwREC4 |
Description
display
property to grid
. This gives you the ability to use all the other properties associated with CSS Grid.
NoteIn CSS Grid, the parent element is referred to as the container and its children are called items.
Instructions
container
class to grid
.
Tests
tests:
- text: <code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.
testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');
Challenge Seed
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
Solution
var code = ".container {display: grid;}"