Build Responsive Wrapping Cards with Tailwind flex-wrap

flex-wrap lets cards reflow

By default flex items refuse to wrap and shrink to fit. Add flex-wrap and, when the row runs out of horizontal room, overflowing cards drop onto a new line instead. With gap-6 the spacing stays identical in both directions.

<div class="flex flex-wrap gap-6">
  <div class="basis-64 grow">Card</div>
  <div class="basis-64 grow">Card</div>
  <div class="basis-64 grow">Card</div>
</div>

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

Control the wrap point with basis

Give each card a basis-64 (its ideal width) plus grow, and the row fits as many 16rem cards as it can, then wraps — cards on the last partial row stretch to fill. That is a responsive card grid with no media queries at all: the layout adapts purely to the available width.

flex-wrap vs grid

Both build card grids. Reach for flex-wrap when you want cards to size themselves and pack as many per row as fit (a fluid gallery). Reach for grid grid-cols-* when you want a fixed number of equal columns per breakpoint. Flex wrapping is content-driven; grid is column-driven.

Common mistakes

Forgetting flex-wrap. Without it, cards squish onto one line instead of wrapping.

No basis. Cards collapse to their content width and wrap unpredictably.

Using margins instead of gap. Margins produce uneven spacing once items wrap onto multiple rows.

Frequently asked questions

How do I make cards wrap to the next line in Tailwind?

Add flex-wrap to the flex container; cards that do not fit move to a new line automatically.

How do I build a responsive card grid without media queries?

Use flex flex-wrap with basis-64 grow on each card; they pack as many per row as fit and reflow as the width changes.

Should I use flex-wrap or grid for cards?

Use flex-wrap for a fluid, content-sized gallery; use grid grid-cols-* when you want a fixed number of equal columns at each breakpoint.