CSS Flexbox vs Grid: When to Use Each

Choose between Flexbox and Grid by asking how items should align, not which feature is newer. Content widths often drive a button group; a card list may need columns that line up across several rows. Using both on the same page is normal.

Flexbox: arrange content along an axis

Flexbox is useful for a row or column of items. This toolbar wraps when its items no longer fit. Each wrapped line lays out independently, so flex-wrap does not create the shared column tracks of a table-like layout.

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

Navigation links, tags, and form actions are common uses. justify-content affects the main axis; align-items affects the cross axis. Changing flex-direction changes the direction of those axes.

Grid: shared rows and columns

Grid lets you define placement in two dimensions. Each column in this card container targets a minimum of 15rem. If the container is narrower, the 100% limit prevents that minimum from forcing a single card outside it.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.card { min-width: 0; }

The layout can adapt without a breakpoint for every column count. Long unbreakable content can still overflow, so decide separately how to display URLs and code blocks.

Grid around the cards, Flexbox inside them

.card { display: flex; flex-direction: column; }
.card__action { margin-top: auto; }

With suitable HTML, these rules push the card action toward the bottom of the available space. Grid manages the outer arrangement while Flexbox handles the content flow inside each card. Test growth with long text instead of locking every card to a fixed pixel height.

Changing visual order in CSS may leave DOM reading order unchanged. Check that keyboard focus does not jump unexpectedly around the screen. For narrow-screen changes, see the viewport and media query guide. Reference: Grid and other layout methods.