How does Flexbox differ from CSS Grid? When would you use each?

Flexbox is one-dimensional — it lays items in a single row or column and is best for distributing items along one axis. Use it for navigation bars, button groups, centering content, and card rows where the number of items may vary. CSS Grid is two-dimensional — it controls both rows and columns simultaneously and is best for full-page layouts, complex grids, and overlapping elements. The rule of thumb: use Grid when you are thinking about the overall page layout and use Flexbox for component-level layout of items within a container. They are complementary — a Grid layout can contain Flex containers for individual cells.