DEV Community

Cover image for The ultimate CSS battle: Grid vs Flexbox

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...
Collapse
 
clara profile image
Clara •

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!

Collapse
 
zupirio profile image
Zupirio •

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.

Collapse
 
viccw profile image
Vic Seedoubleyew •

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!

Collapse
 
dimarconicola profile image
Nicola Di Marco 🔥🙏 •

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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

Is grid the end of the line for layout inavation?

Collapse
 
zanehannanau profile image
ZaneHannanAU •

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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

In 20 years is grid the way we will do things, what do you predict?

Thread Thread
 
zanehannanau profile image
ZaneHannanAU •

In 20 years we might be able to predict 2 years if technology with decent reliability.

Collapse
 
berns_churches profile image
Berns Fire Death •

This is so great! Thank you so much for this!

Collapse
 
alexanderalemayhu profile image
Alexander Alemayhu •

I am struggling with CSS grid but Flexbox makes sense to me. This helps, thanks.

Collapse
 
nikolicstjepan profile image
Stjepan •

Thanks Per, this is super useful!

Collapse
 
gunnerr91 profile image
gunnerr91 •

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