Three tiers, elevated middle.
The pattern#
<div class="grid items-stretch gap-6 md:grid-cols-3">tiers…</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#
- Pricing pages
Related patterns#
patterns/index|All patterns · Grid · Flexbox