The Holy Grail Layout (Grid Edition)

A responsive Holy Grail layout built with CSS Grid and grid-template-areas—no floats, no hacks.
5 min read

Introduction

The Holy Grail layout is a classic web design pattern consisting of a header, three columns (sidebar, main content, sidebar), and a footer. Historically, this layout was difficult to achieve with floats or early flexbox techniques without structural hacks.

CSS Grid makes this pattern straightforward—providing a clear, semantic, and responsive solution with minimal code.

The Grid Snippet

CSS 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

:root {
  --sidebar-width: 200px;
  --layout-gap: 0;
}

.holy-grail-wrapper {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main side"
    "footer footer footer";
  grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: var(--layout-gap);
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

aside {
  grid-area: side;
}

footer {
  grid-area: footer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .holy-grail-wrapper {
    grid-template-areas:
      "header"
      "main"
      "nav"
      "side"
      "footer";
    grid-template-columns: 1fr;
  }
}

If you want a deeper breakdown of how grid-template-areas works—including alignment, spanning, and how the explicit/implicit grid behaves—see Mastering CSS Grid: Grid Areas, Item Alignment, and Spanning.

Minimal HTML Structure

Only the wrapper requires a class. All layout positioning is handled by semantic elements.

HTML 
1
2
3
4
5
6
7

<div class="holy-grail-wrapper">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Right Sidebar</aside>
  <footer>Footer</footer>
</div>

This keeps the markup clean and readable while allowing CSS Grid to control layout independently of source order.

Holy Grail Layout

<div class="holy-grail-wrapper"> <header>Header</header> <nav>Navigation</nav> <main> <h1>Main Content</h1> <p> This is the primary content area. Resize the viewport to see how the grid adapts across screen sizes. </p> </main> <aside>Right Sidebar</aside> <footer>Footer</footer> </div>
This playground is under active development. Some features may be incomplete or behave unexpectedly. If you notice any bugs or unexpected behavior, please let me know!.

Highlights

  • Semantic naming: grid-template-areas acts as a visual blueprint for the layout.

  • Sticky footer: min-height: 100vh combined with a 1fr row pushes the footer to the bottom.

  • Ultra-responsive: Mobile layout is achieved by remapping areas—no DOM changes required.

  • Configurable: Sidebar widths are controlled via CSS variables.

Customization Tips

Adjust Sidebar Width

CSS 
1
2
3

:root {
  --sidebar-width: 240px;
}

Remove the Right Sidebar

  • Remove the <aside> element

  • Update the grid areas:

CSS 
1
2
3
4
5
6
7

.holy-grail-wrapper {
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: var(--sidebar-width) 1fr;
}

Make a Sidebar Sticky

CSS 
1
2
3
4
5

nav {
  position: sticky;
  top: 0;
  align-self: start;
}

Change Mobile Order

Simply rearrange the grid-template-areas inside the media query.

Accessibility Notes

  • Semantic elements (header, nav, main, aside, footer) provide meaningful landmarks for assistive technologies.

  • Ensure the source order matches the logical reading order, even if the visual layout changes.

  • Avoid unnecessary ARIA roles when semantic elements already convey meaning.

Common Variations

  • Two-column layout: Remove the right sidebar for blogs and docs.

  • Dashboard layout: Left nav + main + utility rail.

  • Content-first mobile: Stack main immediately below header.

  • Ad rail: Replace aside with promotional or analytics content.

Use Cases

  • Dashboard UIs: Left nav, center data, right-side filters.

  • Blog Layouts: Main article with a sidebar for categories and another for ads.

  • Documentation Sites: Header navigation with a sticky table of contents.

Key Takeaway

This Grid-based Holy Grail layout is:

  • Modern and hack-free

  • Easy to reason about

  • Fully responsive

  • Accessible by default

  • Flexible enough for real-world UI systems

Use it as a layout foundation, then adapt it via grid areas rather than restructuring your markup.

CSS

Changelog

  • — Initial publication
# of hits