Grid area help

Language Help CSS
,
1

Hello Team! I’m a bit confused with this grid-area property from the given example. For the .a selector the dimensions for grid-row is 5 / 7; and grid-column is 1 / span 2;.

Pasted Graphic 18
Pasted Graphic 181914×514 81.9 KB

When refactoring to grid-area how come the dimensions change to 5 / 1 / span 2 / span 2; ? Where does the 2nd “span 2” come from, i thought the row-end was 7?

Pasted Graphic 19
Pasted Graphic 191920×748 110 KB

2

Hi. row-start being at 5, if it spans 2 it will end at 7 :wink:

3

Oooooh that makes sense now! Thank you! I guess I was thinking about it too hard lol.

4

No worries, it’s easy to go too far when your head is in it :slight_smile:

1 Like