One fixed-width column beside a fluid one — the dashboard primitive.

The pattern#

html
<div class="flex">
  <aside class="w-64 shrink-0">sidebar</aside>
  <main class="flex-1 min-w-0">fluid</main>
</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#

  • Dashboards
  • Docs layouts
  • Settings pages

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