2.1 KiB
2.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
5a9036ee38fddaf9a66b5d37 | Add Gaps Faster with grid-gap | 0 | https://scrimba.com/p/pByETK/ca2qVtv |
Description
grid-gap
is a shorthand property for grid-row-gap
and grid-column-gap
from the previous two challenges that's more convenient to use. If grid-gap
has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
Instructions
grid-gap
to introduce a 10px
gap between the rows and 20px
gap between the columns.
Tests
tests:
- text: <code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');
Challenge Seed
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{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;
/* 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 {grid-gap: 10px 20px;}"