When should you use Flexbox versus Grid?

• Flexbox: one-dimensional layout - a row or a column. Content drives sizing (toolbars, button groups, centering).
• Grid: two-dimensional - rows and columns together; you define the frame first, then place content.

.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

In practice you use both: Grid for page structure, Flex for the clusters inside it.