CSS Grid



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.



This topic will remain unlisted until such time as a link to the exact exercise is posted.


I added the link to this post



Yes, the physical count.

2 / span 3

2, 3, 4

Eg. without span,

5 / 7

5, 6, 7


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.