Card row with flexbox

Quick implementation

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

.card-row > * {
  flex: 1 1 15rem; /* grow, shrink, min-width before wrapping */
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer building a card layout.

Goal: A horizontal row of cards using flexbox that wraps to multiple rows on narrow viewports.

Technical constraints:
- Use display: flex with flex-wrap: wrap on the container.
- Use gap for spacing — no margin hacks.
- Each card should use flex: 1 1 15rem so cards grow to fill space but wrap below 15rem.
- Cards in the same row must be equal height (flexbox handles this by default).
- Use oklch() for any color values.

Edge cases:
- If only one card wraps to a new row, it should not stretch to full width. Consider using max-width or a grid alternative.
- Cards with different content heights should still align in the same row.
- Ensure gap works correctly with wrapping (it does in modern browsers).

Why this matters in 2026

Card rows are everywhere — feature lists, product grids, team pages. Flexbox with wrapping gives you a responsive layout without a single media query. The flex: 1 1 15rem shorthand tells each card: "grow to fill available space, shrink if needed, but wrap to a new row below 15rem." It's the simplest responsive pattern in CSS.

The logic

flex-wrap: wrap allows items to flow to the next line when the container is too narrow. flex: 1 1 15rem sets three values: flex-grow: 1 (grow to fill space), flex-shrink: 1 (shrink if needed), and flex-basis: 15rem (ideal starting width). When the container can't fit another 15rem card, the card wraps. Cards in the same row are automatically stretched to equal height by flexbox's cross-axis alignment.

Accessibility & performance

Flexbox layout is single-pass and highly optimized in all browsers. For accessibility, ensure cards have meaningful content structure — a heading, description, and action. If cards are clickable, make the entire card a link or use a click-target overlay rather than wrapping a <div> in an <a>. Screen readers follow source order, which matches the visual order in a wrapping flex layout.