Common Layout Patterns

Why Layout Patterns Matter

In production, you do not design every page from scratch. You reuse proven layout shells: header + content, sidebar dashboards, centered marketing pages, and sticky navigation. Tailwind makes these patterns easy because layout rules are explicit and local.

Pattern: Centered content with max width

This is the default for documentation pages, blog posts, and most marketing content. Use container plus padding for safe gutters.

<main class="container mx-auto px-4 py-10">
  <article class="max-w-3xl">...</article>
</main>

Pattern: Full-bleed section with centered inner wrapper

When you want edge-to-edge background colors but still want readable content width, wrap the content inside a max-width container.

<section class="bg-gray-50">
  <div class="container mx-auto px-4 py-12">
    ...
  </div>
</section>

Pattern: Sticky header

Sticky headers improve navigation in dashboards and docs. Always include a background and z-index so it does not become transparent and unusable.

<header class="sticky top-0 z-50 bg-white border-b">
  <div class="container mx-auto px-4 h-14 flex items-center justify-between">
    ...
  </div>
</header>

Pattern: Sidebar + content (dashboard shell)

A classic application layout: fixed sidebar, fluid main content. Use shrink-0 to prevent sidebar compression.

<div class="min-h-screen flex">
  <aside class="w-64 shrink-0 border-r p-4 hidden lg:block">
    Sidebar
  </aside>
  <main class="flex-1 p-6">
    Main content
  </main>
</div>

Pattern: Mobile sidebar (off-canvas idea)

In production, sidebars usually collapse on mobile. The simplest pattern is: hide the sidebar on small screens and show a menu button that opens an overlay panel.

This page does not implement the JavaScript, but the layout structure typically looks like this:

<div class="lg:hidden">
  <button class="px-3 py-2 border rounded">Menu</button>
</div>

<aside class="hidden lg:block w-64">Sidebar</aside>

Pattern: Holy grail (header, footer, sticky footer)

Many apps need the footer at the bottom even when content is short. Use min-h-screen and flex-col with flex-1 content.

<div class="min-h-screen flex flex-col">
  <header class="border-b">Header</header>
  <main class="flex-1">Content</main>
  <footer class="border-t">Footer</footer>
</div>

Pattern: Two-column content layout (docs style)

Documentation often uses a narrow sidebar and a readable main column. Grid makes this predictable.

<div class="container mx-auto px-4 py-10">
  <div class="grid grid-cols-12 gap-6">
    <nav class="col-span-12 lg:col-span-3">TOC</nav>
    <article class="col-span-12 lg:col-span-9 max-w-3xl">Content</article>
  </div>
</div>

Pattern: Card grid page shell

This pattern is ideal for “list of items” pages, dashboards, and resource galleries.

<div class="container mx-auto px-4 py-10">
  <h2 class="text-xl font-semibold">Dashboard</h2>
  <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="border rounded-lg p-4">Card</div>
    <div class="border rounded-lg p-4">Card</div>
  </div>
</div>

Layout stability rules

• Use container + padding for consistent gutters.
• Prefer gap for spacing between layout children.
• Keep content readable with max-w-* in text-heavy pages.
• For sticky elements, always set background and z-index.
• Hide complexity on mobile and progressively enhance at lg/xl.

Common mistakes

• Full-width text blocks without max width (hard to read).
• Sticky headers without background (content bleeds under).
• Sidebar layouts without shrink-0 (sidebar collapses unexpectedly).
• Over-nesting containers and creating inconsistent gutters.

Production checklist

• Text-heavy content uses max width (max-w-2xl, max-w-3xl).
• Grid/flex layouts use gap instead of manual margins.
• Mobile-first layout is clean before adding desktop complexity.
• Sticky elements include bg + z-index.