They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.
Though both are used for laying out your content, but Grid and Flexbox serve different purposes though. We can probably still use Flexbox for majority of the cases, but Grid was designed to help with some specific CSS layout problems that only it could resolve.
Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers.
Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.
It's not really 1 vs the other IMO. I use flexbox within grid quite often, for example. They're two different tools with some overlap...
Grid is absurdly more powerful for full-page layout than flexbox (which is amazing for individual columns or rows). Especially once we start getting subgrid. The common comparison is 1 dimensional (flex) vs 2 dimensional (grid) layout.
Not really. Flexbox is good for laying elements out along a single axis, either horizontally or vertically. Grid is good for doing true 2-dimensional layout.
You'll probably end up using both of them - grid for larger layouts and flexbox for smaller components. They work together fairly harmoniously.
Why not both? Grid is superior for defining the overall structure of a page, but flex shines in micro-layouting. (Although the line between them is blurry sometimes).
Grid tells boxes where to go. Flex tells content how to take up space.
Technically the window is a box with content, and technically your content can be split into a grid of boxes, so grid and flex can kind of do each other's jobs if you force them. But if your content isn't really boxes or your grid is really content, consider using the other.
They serve different purposes, and you'll often want to use both for different pieces of the layout. Flexbox is for laying things out in one dimension, Grid is more for two-dimensional ones.
I read everywhere that both are complimentary. I am a complete amateur in web dev but the only place where I can imagine flexbox in an otherwise grid display is when divs are stacked and we do not know how many divs there will be.
If grid has a way to address these unpredictable divs (not knowing how many there will be) then my last use case is closed.
For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout.
I guess I’m wondering why it’s any more complicated than:
* Flexbox is for formatting in one dimension (or axis)—a row or a column.
* Grid is for layout in 2-dimensions—columns and rows; a.k.a. a grid.
In fact, you can use flexbox and grid in the same layout, each doing its thing.
I use both flexbox and grid layout together. They are not comepting, merely completing each other. Grid can do things Flexbox can't do. Flexbox can do things Grid can't do.
Both CSS Grid and Flexbox are powerful in their ways. Before deciding which to choose, understand the complexity, the structure and the content of the site you are to build.
reply