The ultimate CSS battle: Grid vs Flexbox

Per on June 07, 2019

CSS Flexbox has become extremely popular amongst front-end developers in the last couple of years. This isn’t surprising, as it has made it a lot e... [Read Full]
markdown guide

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.


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:

  • 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.

I would love to have your thoughts on this!


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.


Would recommend the course to anyone. It's really fantastic and I feel a million times more comfortable with Grid now, whilst also knowing where Flex should comfortably sit in my toolbelt. Thanks again for the article too!


Is grid the end of the line for layout inavation?



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.


I would personally prefer just using grid, everytime we are forced to use some margin/padding etc it feels like a hack.

code of conduct - report abuse