It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is
But you could also argue that purely 1D layout like this is more powerful in Flexbox, because Flexbox allows us to move those elements around easier (e.g. move them all to one side or another, change their order, space them out evenly, etc).
I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...) are managed through a framework. I have not yet found a case where Grid could not replace Flexbox out of the box (that is without advanced CSS gymnastics or a lot of code).
To take the example of the quote above, all the "moves" mentioned are directly available in Grid, usually with the same semantics as in Flexbox.
What are the fundamental areas covered by Flexbox which are difficult or impossible to manage with Grid?
EDIT: the browser support is not important (I only use evergreen browsers and can switch if needed)
Here are 14 areas where flexbox comes out ahead of Grid (Level 1):
Centering wrapped items. Imagine five elements. Only four per row. The fifth one wraps. In a flex container, that fifth one can be easily aligned across the entire row with justify-content. Try centering this fifth item in a grid container. Not a simple matter.
Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.
Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.
Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.
Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.
Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.
Aligning grid items across the entire row/column (like flex items can)
Make grid item use remaining space like flex item with flex-grow: 1
How to make the items in the last row consume remaining space in CSS Grid?
How to get the effect of grid layout's grid-template-columns with a variable number of columns?
Shrinking. Flex has flex-shrink. Grid has... nothing.
Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such repeat(), auto-fill and minmax(), it can't be done.
Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.
An important benefit of the inline-level container is lost in some cases. If you have a Grid layout with a dynamic number of columns – meaning you cannot set the number of columns or a width for the container – then display: inline-grid doesn't work. All items stack in a single column. This is because the default setting on grid-auto-columns is one column. In at least some cases, flexbox fixes the problem.
Getting columns with author-defined grid areas to wrap without media queries. Let's say you have a two-column grid containing grid areas that have set locations, and want the grid to automatically transition to a single column (with the second column wrapping below the first) on smaller screens. With grid, you would need a media query. The auto-fill and auto-fit functions will not work because the locations of grid areas have been specified. If you want to avoid a media query, flexbox's flex-wrap function may be useful.
There is no column-reverse function in CSS Grid. Getting items to populate a container starting from the bottom isn't possible with a single rule applied to the grid container. With flexbox, however, the task is simple with flex-direction: column-reverse.
The resize property on a grid item has no effect on the track. Unless a column or row track is set to auto (content-based sizing), resizing a grid item will overflow the track. Since flexbox doesn't have column and row tracks, it may be a useful alternative.
Maintaining item heights in dynamic layouts. Let's say that item 3, which is in row 3, must maintain its height whether in row 3 or row 2 (if item 2 is missing; so 3 shifts up). Grid layout can't do this, because row heights are set at the container level and can't be adjusted at the item level. Flexbox can do this because there are no rows or columns, and item heights can be manipulated at the item level.