Hi thanks for this nicly written article. I also really like the illustrations :) I have one question - I am fairly new to CSS grid so I try to understand its usecases. Why do you prefer using a CSS grid over a mere flexbox for the header and then one flexbox for sidebar and content and footer? It is so the footer stays in place? Thank you!
Flexbox is unidirectional, from left to right while CSS Grid is bidirectional. If you follow the course (which is nice and concise) you'll learn that you can combine both grid & flexbox.
It would have been very easy to achieve the same result using Flex only. The only real use case I can think of when it's essential to use Grid is when there's a long text that has to be dynamically distributed on (changing) number columns.
I had never heard of Grid, so I am totally new to it.
However, it seems to me that these examples might be misleading in order to understand the use cases for it:
using a grid for the final 2-dimensional layout seems like a uselessly rigid design compared to using one main vertical flexbox filled with horizontal flexboxes
out of pure instinct, it seems to me that in cases like these examples, using grid would be like using tables for layout: something that has been deemed bad practice, and I understand why, because it looks like perverting their purpose
This is really out of pure intuition on my part, since I don't know this at all, but I found your other example with the image grid a lot more suited.
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
11 plus years* active enterprise development experience and a Fine art degree 🎨
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
11 plus years* active enterprise development experience and a Fine art degree 🎨
My name is Alexander and I am a tech lead by day. During the night I am an open-source developer on a mission to build helpful tools to help people in their learning journeys.
just Grid!!!
Hi thanks for this nicly written article. I also really like the illustrations :)
I have one question - I am fairly new to CSS grid so I try to understand its usecases. Why do you prefer using a CSS grid over a mere flexbox for the header and then one flexbox for sidebar and content and footer?
It is so the footer stays in place?
Thank you!
Flexbox is unidirectional, from left to right while CSS Grid is bidirectional. If you follow the course (which is nice and concise) you'll learn that you can combine both grid & flexbox.
It would have been very easy to achieve the same result using Flex only.
The only real use case I can think of when it's essential to use Grid is when there's a long text that has to be dynamically distributed on (changing) number columns.
Thanks for this article!
I had never heard of Grid, so I am totally new to it.
However, it seems to me that these examples might be misleading in order to understand the use cases for it:
This is really out of pure intuition on my part, since I don't know this at all, but I found your other example with the image grid a lot more suited.
I would love to have your thoughts on this!
Is grid the end of the line for layout inavation?
Nope.
There is no "end of the line" for CSS. In anything.
If you can deal with grid, flex, float and block you're already going pretty well here.
In 20 years is grid the way we will do things, what do you predict?
In 20 years we might be able to predict 2 years if technology with decent reliability.
This is so great! Thank you so much for this!
I am struggling with CSS grid but Flexbox makes sense to me. This helps, thanks.
I would personally prefer just using grid, everytime we are forced to use some margin/padding etc it feels like a hack.
Thanks Per, this is super useful!