Header, two sidebars, main, footer — the classic app layout.

The pattern#

html
<body class="grid min-h-screen grid-rows-[auto_1fr_auto]">
  <header class="border-b">header</header>
  <div class="grid md:grid-cols-[220px_1fr_220px]">nav main aside</div>
  <footer class="border-t">footer</footer>
</body>

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#

  • Classic portals
  • Admin layouts
  • Documentation sites

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