Responsive equal cards with stretch + pinned actions.

The pattern#

html
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <article class="flex flex-col rounded-2xl border p-6">
    <p class="flex-1">body</p>
    <button class="mt-4">action</button>
  </article>
</div>

Responsive behavior#

Every pattern here is breakpoint-agnostic at its core — add sm:/md:/lg: prefixes to the grid/flex containers to tune when it collapses. Because the primitives are utilities, responsiveness is a prefix, never a rewrite.

When to use#

  • Features
  • Products
  • Posts

patterns/index|All patterns · Grid · Flexbox