You can build responsive cards without media queries by letting Flexbox size each card with flex-basis, then wrap cards when the row runs out of space.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.feature-card {
  flex-grow: 1;
  flex-basis: 150px;
  max-width: 200px;
}

Each card starts from a 150px base size, grows into free space, and stops growing at 200px. If another card no longer fits on the row, Flexbox moves it to the next one.

How the container works

The container needs four rules:

• display: flex puts the cards in a row.
• flex-wrap: wrap allows cards to move onto a new row.
• gap: 1rem adds equal space between rows and cards.
• justify-content: center centers a row when its cards have reached their maximum width.

Without flex-wrap: wrap, the cards stay on one row and keep shrinking. Wrapping is what lets this layout change its row count without a media query.

How the card sizing works

flex-basis: 150px gives Flexbox the card’s starting size before it shares the available space. Change this value to control when cards wrap.

flex-grow: 1 lets every card take an equal share of free space on its row. If three cards fit, they grow together. If only two fit, those two can use more room.

max-width: 200px stops a card from becoming too wide. It also keeps a single card on the last row from stretching across the whole container. Adjust both widths based on the result you want.

You can write the growing and base-size rules with the flex shorthand:

.feature-card {
  flex: 1 1 150px;
  max-width: 200px;
}

The three values are flex-grow, flex-shrink, and flex-basis. This version keeps the same behavior while making the relationship between the values clear.

Prevent wide content from overflowing

Flex items use min-width: auto by default. A long word, URL, or other wide content can stop a card from shrinking, even when flex-shrink is enabled.

Add min-width: 0 if a card’s content forces it outside the container:

.feature-card {
  min-width: 0;
}

What happens on the last row

The last row may contain fewer cards. Because each card can grow, those cards use the row’s free space until they reach max-width: 200px. Then justify-content: center centers the group.

Remove max-width if you want the final cards to stretch across all remaining space:

.feature-card {
  flex: 1 1 150px;
}

That choice changes the last row most clearly, so pick the version that matches your layout.

Flexbox or Grid?

Use this Flexbox pattern when cards should flow as a row and the last row should have its own alignment. Use auto-fit and minmax() for a responsive CSS Grid when you want the browser to create equal grid tracks.

Both methods respond to the container’s available space. Media queries still make sense when the whole layout needs to change, rather than only wrapping its cards.

For values such as text size and spacing, clamp() creates fluid CSS values without media queries.

If each card needs a thumbnail or video frame that keeps its shape, CSS aspect-ratio handles that without padding hacks.

For a single card or form that only needs a width cap, use width with max-width for responsive CSS widths.

You can also read the full guide to responsive CSS without media queries.

You can also view the original responsive Flexbox cards visual or browse more frontend visuals and CSS examples.

Wrap-up

Combine flex-wrap, flex-grow, and flex-basis to make cards fill each row and wrap before they become too small. Add max-width when you need to control how wide the cards and the last row can become.

For more short, visual frontend lessons, visit WebDevVisuals.