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
 
redcamel profile image
RedCamel

just Grid!!!

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
 
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
 
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
 
berns_churches profile image
Berns Fire Death

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

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

Collapse
 
alexanderalemayhu profile image
Alexander Alemayhu

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