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?
Latest comments (33)
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 --'
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.
If you care about browser support, flexbox all the way. If you do a thorough QA, grids will drive you crazy :)
Yeah, the best practice is always to check Caniuse 😉
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.
I mostly use flex box but that’s almost entirely because I still can’t wrap my head around css grid.
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'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 ?
Grid for layout, Flexbox for components.
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 prefer cash grid but there is when flexbox is necessary