Content scrolls; the rail stays.
The pattern#
<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
Related patterns#
patterns/index|All patterns · Grid · Flexbox