5.1 KiB
5.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
5a90372638fddaf9a66b5d38 | Use grid-column to Control Spacing | 0 | https://scrimba.com/p/pByETK/cnzkDSr |
Description
grid-column
property is the first one for use on the grid items themselves.
The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.
This is what the lines look like for a 3x3 grid:
column lines
1
2
3
4
row lines
1
2
3
4
grid-column
property in conjunction with the line numbers you want the item to start and stop at.
Here's an example:
grid-column: 1 / 3;
This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.
Instructions
item5
consume the last two columns of the grid.
Tests
tests:
- text: <code>item5</code> class should have a <code>grid-column</code> property.
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g));
- text: <code>item5</code> class should have a <code>grid-column</code> property which results in the <code>div</code> with the <code>item5</code> consuming the last two columns of the grid.
testString: assert(hasCorrectSpacing());
Challenge Seed
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* add your code below this line */
/* add your 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;
}
</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>
Before Test
<script>
const hasCorrectSpacing = () => {
const contTwoPlusThreePlusGapWidth = $('.item2').width() * 2 + 10;
const item5Width = $('.item5').width();
const diff = Math.abs(contTwoPlusThreePlusGapWidth - item5Width);
/* To avoid rounding errors the largest allowed diff is set at 0.01px */
return diff <= 0.01;
};
</script>
Solution
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
}
.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;
}
</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>