What is the difference between Flexbox and CSS Grid, and how do you choose between them?

The clean distinction is dimensionality. Flexbox is one-dimensional — it lays items out along a single axis and the other axis follows the content. Grid is two-dimensional — you define rows and columns together and place items into that structure.

Reach for Flexbox when:

• The content should determine the sizing — a navigation bar, a toolbar, a row of buttons, a card footer.
• You want items to wrap naturally without caring which row they land on.
• You need alignment along one axis, including the classic centring case.

Reach for Grid when:

• The layout should determine the structure — a page skeleton, a dashboard, an image gallery with aligned rows and columns.
• You need items to line up in both directions, which flex-wrap cannot guarantee.
• You want to name areas and rearrange them at breakpoints with grid-template-areas, which is far more readable than reordering markup.

Note: They are not rivals. The normal pattern is Grid for the page skeleton with Flexbox inside individual components. And auto-fit with minmax gives you a responsive gallery with no media queries at all: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))