SayUI
← Library→ Turn this into a prompt
Layout & grid

Holy Grail Layout

Header, footer, side rails, and a flexible main region—the classic full-page shell.

Also known as three-column layout · admin shell · classic page chrome

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Holy Grail Layout".

Build the admin shell with CSS Grid: grid-template-areas "header header" / "sider main" / "footer footer", columns 240px 1fr, rows 56px 1fr auto, min-height: 100dvh. Main gets min-width: 0 and its own scroll. Collapse the sider by transitioning columns to 64px (icon-only). Use semantic header/aside/main/footer.

Anatomy:
- header: Full-width top bar.
- main: Flexible middle that eats remaining width (1fr).
- sider / aside: Fixed-width rail; admin apps often collapse it.
- footer: Full-width bottom strip.

Preferred API / pattern: `CSS Grid shell / dashboard layout components`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Main without min-width
  • ○Avoid: 100vh for full page
  • ○Avoid: Collapsing only width without fading labels
  • ○Avoid: Scrolling the whole page instead of main

In plain wordsHow people search for it

“header plus left nav plus flexible main content”“that admin app frame with a side menu and a top bar”“header and footer fixed, middle columns in between”

AnatomyOpen for part names

header
Full-width top bar.
main
Flexible middle that eats remaining width (1fr).
sider / aside
Fixed-width rail; admin apps often collapse it.
footer
Full-width bottom strip.

How to write itOpen for stack patterns

Web (HTML/CSS)grid-template-areas for header / sider / main / footer
React + Tailwind + shadcn/uiCSS Grid shell / dashboard layout components
SwiftUINavigationSplitView / HStack + safeAreaInset
Ant Design<Layout><Sider /><Header /><Content /><Footer />

Notes

Named “holy grail” because float-era CSS made it miserable. CSS Grid ends the quest: draw the layout in grid-template-areas. The real-world form is the admin shell—collapsible side menu, top bar, breadcrumb, content. Give main min-width: 0 so wide tables don’t blow the page; animate sider collapse via grid-template-columns, not width fights; use 100dvh not 100vh for full-page height.

Common mistakesHumans and models trip here

  • Main without min-width: 0: a wide table forces horizontal scroll on the whole app.
  • 100vh for full page: mobile browser chrome resizes and leaves gaps—use 100dvh.
  • Collapsing only width without fading labels: text crushes into vertical gibberish.
  • Scrolling the whole page instead of main: header and sider scroll away.

More failure symptoms on AI broke it.

Related patterns

Grid SystemSplit the page into N equal columns (usually 12) and size blocks by how many columns they span.Accordion / CollapseStacked headers that expand and collapse to show nested content.Sticky FooterOn short pages the footer hugs the viewport bottom; on long pages it follows normal document flow.BreadcrumbA trail of links showing the path from the root to the current page.

Spotted a wrong name or missing pattern?

Message on X