DEV Community

Cover image for Flexbox vs CSS Grid: Which one do you prefer?
Madza
Madza Subscriber

Posted on

Flexbox vs CSS Grid: Which one do you prefer?

Flexbox is a one-dimensional layout model, that offers space distribution between items in an interface and powerful alignment capabilities without using float or positioning.

CSS GRID is a more powerful system compared to Flexbox, using a two-dimensional layout system allowing users to layout content in rows and columns.

I tend to use them both - Grid for building mainframe and general layout blocks and Flexbox for everything inside those blocks.

Which use cases do you attribute to both when building layouts, positioning elements, arranging content, etc?

Oldest comments (33)

Collapse
 
ben profile image
Ben Halpern

Flexbox never really made much sense to me. I find grid a lot more intuitive. Neither is without its learning curve though.

Collapse
 
idoshamun profile image
Ido Shamun

I'm a long time flexbox fan and once I got used to it, it's definitely my go-to now. Still having hard time to think in grid unless it's super intuitive

Collapse
 
badpractice profile image
Bad Practice

Flex is easier for vertical and horizontal alignment in my opinion.

Collapse
 
devhe4d profile image
devhe4d

I think it's not a good mindset to choose one over another , you can ( or its better to say must ) use them togather to create a better layout.

Collapse
 
feerzlay profile image
Denis Yakshov

Most of the times I use flexbox. But grid is very helpful when there should be a spacing between elements (gap) or elements should be rearranged in some difficult manner (grid-template-areas for the rescue). Also auto-fill and auto-fit are amazing for a stuff like lists of cards.

Collapse
 
mattinreality profile image
MattInReality

Good news. Gap can be used with flex.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Browser support isn't too great, though. But I'm hoping it will be one day. No more having to do "bottom + right margins on all except the last child"! And better LTR/RTL spacing!

Collapse
 
louislow profile image
Louis Low • Edited

I am a flexbox person. Haven't found a reason to use Grid yet.

Collapse
 
perpetual_education profile image
perpetual . education • Edited

They are for different things. Flex for flex / Grid for grids. We find very few uses for Grid so far.

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Actually I use both. Flex and grid both have useful things. But since I first learned Flexbox
through the mastery games, I tend to use it more than grid. I use grid more for the general layout and then flex for the more specific things.

Collapse
 
jwp profile image
JWP

I'm a huge Grid fan. I only use the grid. I don't like flexbox at all.

Collapse
 
nimitwalia89 profile image
nimit walia

I have been using flex which works fine but for multi row items i might start using grid which i recently started learning. Mainly if i dont want to manually manage margins. Other than that flex works gr8 nd i easy.

Collapse
 
sarthology profile image
Sarthak Sharma • Edited

I like grid but both have its own advantages. So instead of going with preference bais I try to use them both where they are required. ๐Ÿ˜Š
check out this article to know more