DEV Community

loading...
Cover image for Flexbox vs CSS Grid: Which one do you prefer?

Flexbox vs CSS Grid: Which one do you prefer?

madza profile image Madza ・1 min read

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?

Discussion

pic
Editor guide
Collapse
shahryar_rp profile image
Shahryar

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
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
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
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
cchana profile image
Charanjit Chana

Even now I'm still discovering layouts and techniques that make flexbox very flexible. There are a bunch of properties I wish it could take from grid to make it a bit more intuitive for layouts (gaps for example), but I haven't yet come across a use case for grid in my projects. I need to experiment more with grid, but right now I'm able to achieve responsive layouts with less CSS using flexbox.

Collapse
cchana profile image
Charanjit Chana

This excellent video on container queries with flexbox actually highlighted that the gap property is there to use with flexbox in the latest version of some browsers.

Not sure if it's a game changer, but there are certainly times where specifying the gap is more useful that specifying the width of elements.

Collapse
mattwaler profile image
Matt Waler

I use grid when I know the rows and columns will be equal and the layout won't be derived from one or more of it's children, I use flexbox when I need layouts that are driven by widths and heights of children (like a header)

Collapse
sarthology profile image
Sarthak Sharma

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

Collapse
gsarig profile image
Giorgos Sarigiannidis

They are two different tools for different purposes, even if they can overlap in some cases. If the task can be done equally well and painless with any of them, I tend to prefer Flexbox because of the better browser compatibility.

Sometimes, though, Grid can offer you much more convenience and is much more powerful. For example, if I had to build this layout with Flexbox I'd had to go into a nesting nightmare, as the order of the elements was very specific on each breakpoint. With Grid, the HTML markup was just a bunch of same-level divs and everything was handled with CSS.

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
dawntraoz profile image
Alba Silvente 💃🏼

I was always in love with Flexbox, maybe because I started styling before grid already exists. But I really like to be consistent in my code and use always the same properties, I manage to make everything with flex.

You can check some examples I use daily here

Collapse
loouislow profile image
Loouis Low

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

Collapse
wahidn profile image
WahidN

Grid for layout and flex for the items

Collapse
asasced profile image
Jesús Jiménez

I use flex and grid on the same project, is that bad? 😰

Collapse
jwp profile image
John Peters

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

Collapse
badpracticeio profile image
Bad Practice

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

Collapse
perpetual_education profile image
perpetual . education

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

Collapse
salterscript profile image
Tom Salter

Grid for major layouts and flexbox for components

Collapse
scorp13 profile image
Collapse
ma2web profile image
Collapse
stephanie profile image
Stephanie Handsteiner

Same.

One is not supposed to replace the other, you can absolutely use both (in conjunction).

Collapse
pixleight profile image
Chris Violette

Both. They're not meant to be mutually exclusive; they both have different use cases. Use which one is more appropriate.

Collapse
btlm profile image
btlm

I like to mix it up. Both are in my mind if I think about RWD techniques. It's nothing bad to use flex layout in grid item or grid layout in flex item.

Collapse
pontakornth profile image
pontakornth

It's kinda different tool for different problems. I prefer to work with grid as it's easier to deal with. I use both anyway.

Collapse
mirelaprifti profile image
Mirela Prifti

If you care about browser support, flexbox all the way. If you do a thorough QA, grids will drive you crazy :)

Collapse
madza profile image
Madza Author

Yeah, the best practice is always to check Caniuse 😉

Collapse
benarn profile image
Benoît Arnoult

I'm more of a flexbox guy but I never took the time to really learn css-grid. Is it really worth it ? Or is a bootstrap-style grid + flexbox sufficient ?

Collapse
weptim profile image
WEPUKHULU TIMOTHY

I prefer cash grid but there is when flexbox is necessary

Collapse
ziizium profile image
Collapse
technicalgeekry profile image
Angela Reeder

I mostly use flex box but that’s almost entirely because I still can’t wrap my head around css grid.

Collapse
arieloo profile image
Ariel

Just began using Grids cause I was in a dead end trying to build responsive layouts. I can see now all the time I've wasted on flexbox where Grid woul've been nobrainer --'