Link to exercise: https://www.codecademy.com/courses/learn-css-grid/lessons/css-grid-i/exercises/grid-col?action=lesson_resume&course_redirect=learn-css
The instructions were to have the grid item with a class of “.b” span rows 2 through 4:
.b {
grid-column: 2 / span 6;
grid-row: 2 / span 3;
}
I originally put grid-row: 2 / span 2; because I figured it starts at 2 and spans two rows, aka rows 2 through 4. But it said that was incorrect and that the correct code is what is above. Starting at 2 and spanning 3 rows. I realized that the end point for grid items is +1 of the actual value you want it to end at, and fixed it.
But then, the very next line of instruction states: “Now let’s go back to box a and refactor the value of the grid-column property using the keyword span. The grid item should still start in the first column and span 2 columns.” So I entered this code:
.a {
grid-row: 5 / 7;
grid-column: 1 / span 3;
}
So just like the first instruction, it is a grid item spanning two columns/rows. Only this time, it tells me my span code is wrong and that this is correct:
.a {
grid-row: 5 / 7;
grid-column: 1 / span 2;
}
So which is it? Does span specify exactly how many columns/rows you want your grid item to span? or do you have to add 1 to that value you would like you grid item to end. What am I missing here? Does grid-column and grid-row have different rules for syntax? Please help.