Content scrolls; the rail stays.

The pattern#

html
<div class="grid gap-12 lg:grid-cols-[1fr_280px]">
  <article>long content</article>
  <aside><div class="sticky top-24">rail</div></aside>
</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#

  • Docs
  • Long forms
  • Checkout

patterns/index|All patterns · utilities/grid/grid-template-columns|Grid · utilities/flexbox/flex-direction|Flexbox