As you develop page or component layouts, you may find yourself wondering when it’s better to use Flexbox and when to use Grid.
Use Grid when you want items to line up along a vertical, a horizontal axis, or both.
Use Flexbox when you want to distribute items and space vertically or horizontally.
Of course, these aren’t absolute rules. There’s a lot of overlap in terms of what you can do with these modules. Jen Simmons’ video “Flexbox vs. CSS Grid — Which is Better?” walks you through some things to consider when choosing between Grid and Flexbox. Rachel Andrew’s “Should I use Grid or Flexbox?” is another great resource for understanding both.
In practice, your projects will mix both of these techniques, as well as floats. For instance, you may use Grid to define the overall page layout, while using Flexbox for your navigation menu or search box, and floats to place tables or images.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.