N items in a row until space runs out, then they stack — no breakpoints.

The pattern#

html
<div class="flex flex-wrap gap-4 [&>*]:grow [&>*]:basis-64">
  <div class="p-6 border rounded-xl">item</div>
</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#

  • CTA rows
  • Feature trios
  • Card groups without fixed counts

patterns/index|All patterns · Grid · Flexbox