CSS grid

According to the 13th exercise in the css grid lesson [https://www.codecademy.com/courses/learn-intermediate-css/lessons/css-grid-essentials/exercises/grid-column], the code below:

.item {
grid-column-start: span 2;
grid-column-end: 6;
}

does the same thing with the code below:

.item {
grid-column: 4 / span 2;
}

But when I studied this code:

.item {
grid-column-start: span 2;
grid-column-end: 6;
}

I don’t think it does the same thing, can someone please explain?

Please I need an answer

Hi,
For,

.item {
grid-column-start: span 2;
grid-column-end: 6;
}

you’re saying you want the block to be 2 columns wide and stop the column before 6. So, it will take up columns 4 and 5.

and in

.item {
grid-column: 4 / span 2;
}

you want the columns to start at 4 and take up two columns - so, it will again be positioned at columns 4 and 5.

Hope that helps

Ok thanks, now I get the explanation for

.item{
grid-column-start: span 2;
grid-column-end: 6;
}

God bless you

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