When to use Flexbox vs Grid
On the very surface level Flexbox and Grid can look functionally pretty similar, however while they can achieve the same things they perform in certain areas better and with less hassle.
So let’s start with Grid, which unlike Flexbox, uses rows and columns to position things. This can help to add structure to an entire webpage by allowing you to easily lay out containers to a sidebar, header, etc. in a number of unique and creative ways that would otherwise be more tedious to set up. Grid can also be used as an improvement to <table> in most cases, as it’s much easier to adjust and work with.
Here’s an example of some of the creativity you can express using Grid, the “article” is offset to the right and the text scales naturally with the size of the viewport with a single line of CSS when defining the Grid columns. (page made by Jen Simmons)
Flexbox on the other hand is best used in one-dimensional spaces where content flow matters more than content placement. This doesn’t mean that Flexbox isn’t as flexible as Grid, it has a number of powerful functions that allow it to carve out it’s place in any developers toolkit. Flex items will grow and shrink based on the content within them, meaning that it can automatically move items onto new rows if needed but keep them on the same row if not.
Flexbox and Grid can largely act in the same way as each other sometimes but they both excel in different areas, allowing us to make more concise code. Using one over the other where the other is better is a bit like how a screwdriver can be used as a crowbar sometimes and a crowbar can be used as a hammer. If you have the ability to use the right tool for the job then you should probably do so.