DEV Community

Discussion on: Back to Basic: Should we use Flexbox or Grid?

Collapse
 
danielo515 profile image
Daniel Rodríguez Rivero

Will be nice if you explain what:

  grid-column: 1 / 3;
  grid-row: 1 / 3;
Enter fullscreen mode Exit fullscreen mode

means.
One third? Nope. One column and three rows? nope. One ror and three columns? nope.
It is not intuitive to mw

Collapse
 
larsejaas profile image
Lars Ejaas

I think a lot of people struggle with grid untill you realize that you are not positioning items in terms of colum- and row-areas, but instead lines.
Lets say we draw 3 colums. That gives us 4 vertical lines. So if the container needs to fill out the 3 AREAS you need to write:
grid-column: 1/4; This means that you start at line 1 and end at line 4.

Collapse
 
danielo515 profile image
Daniel Rodríguez Rivero

Oh my god! Thank you.
That totally make it click for me.
Thanks

Thread Thread
 
larsejaas profile image
Lars Ejaas

Your' welcome 😊👍

Collapse
 
theodorusclarence profile image
Theodorus Clarence

Check this if you have not understand the grid numbering system.

You can look it up at the link that I referred, after that with the numbering illustration I put up, it should be intuitive enough! Good luck 🚀