Vertical rhythm without margin bookkeeping: a container distributes equal space between children.

The pattern#

html
<div class="space-y-6">
  <p>First</p>
  <p>Second</p>
  <p>Third — equal rhythm, zero margins managed by hand</p>
</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#

  • Article bodies
  • Form sections
  • Any vertical flow

patterns/index|All patterns · Grid · Flexbox