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?
Top comments (33)
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.
Flexbox never really made much sense to me. I find grid a lot more intuitive. Neither is without its learning curve though.
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
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-areasfor the rescue). Alsoauto-fillandauto-fitare amazing for a stuff like lists of cards.Good news. Gap can be used with flex.
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!
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.
Even now I'm still discovering layouts and techniques that make
flexboxvery 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.This excellent video on container queries with flexbox actually highlighted that the
gapproperty 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.
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
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.
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.
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
Alignment with Flexbox
Alba Silvente ππΌ γ» Apr 20 γ» 7 min read
I am a flexbox person. Haven't found a reason to use Grid yet.