What is the difference between CSS grid and CSS flex?
CSS grid and CSS flex are the most recent CSS layout options, and these come with incredible benefits. However, these are not the same, as explained here.
You may have heard of CSS grid and CSS flex, either in passing, or by your peers, or even in a coding boot-camp. This must have had you wondering, what are these two CSS layout that people keep talking about? Well, here, we get to demystify what they are.
Long story short, CSS grid and CSS flex are just but CSS layout options which can be applied to a container (parent) element such as a div. Think of them as a blueprint which decide how the container element will work, with respect to their child elements.
To be able to answer the high level view of this conundrum on CSS grid and CSS flex, we will do so with a series of simple QA.
So, do they use the same logic?
YES and NO.
Yes because they both take advantage of the dimensional aspect of the parent container(row and column view of a container)
No because, despite the fact that they both treat a container in terms of row and column, they are not the same. Well, to know why CSS grid and CSS flex are not the same with this regard, we will understand what each of these are.
What is CSS grid?
CSS grid is a layout which makes the parent element have a two dimensional CSS layout. What does this mean?
It means that the parent element is envisioned in terms of BOTH rows and columns, instead of just in one direction (row or column)
What is CSS flex?
CSS flex on the other hand is a one dimensional CSS layout. This means that the parent element is envisioned either with respect to the column or the row, but not both.
So, with this layout, you get to CHOOSE ONE direction (no pun intended) you want, a column or a row.
Conclusion
Now you have a simple understanding of CSS grid and CSS flex. It all narrows down to the dimensions of view that the parent will have, when either of these are applied to it.
Well, that is it for now.
Happy Coding!
Are you interested in learning CSS? Checkout similar awesome articles on my website: Binge On Code > CSS
