When should you use Flexbox vs CSS Grid?

Reach for Flexbox when you're arranging things along a single line, and Grid when you need a real two-dimensional structure — and remember they combine beautifully.

The deciding question is "is this layout one-dimensional or two-dimensional?" A row of buttons is one line (Flexbox); a full page with header, sidebar, content, and footer is a 2D grid (Grid).

The key insight is that they're partners, not competitors. A very common architecture uses Grid for the overall page skeleton and Flexbox for the components living inside each grid cell:

.page   { display: grid; }   /* the big-picture page structure */
.navbar { display: flex; }   /* a flex row living inside a grid cell */