Card row

Equal-height cards with gap and column flex inside

Snowy mountain ridge under blue sky

Summit pack

Day kit for high trails — from $84

Sunlight filtering through tall forest trees

Forest hammock

Camp setup for quiet nights — from $120

Sunlit green hillside with scattered trees

Trail stove

Compact cook kit — from $48

What Flexbox is doing

.card-row — flex-direction: row, align-items: stretch, gap: 16px
.card — each card is a column flex container so image, title, copy, and button stack with gap
Same image width / height keeps thumbnails tidy (rule 39)

Try this

Change justify-content on .card-row to center or space-between and watch the row shift.

Photos via Unsplash. Always attribute photographers when you publish.

Important HTML

A row wrapper holds the card items.

<div class="card-row">
  <article class="card">…</article>
</div>

Important CSS

Flex wraps cards across the row.

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}