In “CSS Grid: Use grid-column to Control Spacing” we are asked to “Make the item with the class item5 consume the last two columns of the grid.”
For the format, the example given is “grid-column: 1 / 3;”
In the explanation video, the solution is “grid-column: 2 / 4;”, to make the column span from “vertical line 2” to “vertical line 4” (the last vertical line between the columns in a 3 column set up).
However, using “grid-column: 2 / 4;” in the code doesn’t work. It makes item 5 span the last 2 (of 3) columns, but I keep getting " item5 class should have a grid-column property which results in the div with the item5 consuming the last two columns of the grid." - and it won’t let me pass the tests.
My full code:
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* add your code below this line */
grid-column: 2 / 4;
/* 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>
Just to see if it was a bug of some sort that I could solve, I tried many values instead of 2 / 4. I also tried switching it to “grid-row” instead, as I saw another post where they reported that “row” worked instead of “column”.
Is this a bug or am I missing something? Thanks! 