CSS Academy · Lesson

Holy Grail Layout with Grid

Implement the classic holy grail layout with header, footer, main, and two sidebars using CSS Grid.

Holy Grail Layout with Grid is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is the Holy Grail Layout?

The Holy Grail Layout is a classic web design pattern: a full-height page with header, footer, and a three-column middle section (left sidebar, main content, right sidebar). It was notoriously difficult with floats; CSS Grid makes it trivial.

Grid Template Definition

Define the layout with named template areas and rows: grid-template-areas maps the visual structure. Three columns and three rows (header spans all, footer spans all, middle has three columns) capture the entire layout in a readable ASCII diagram.

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 240px 1fr 240px;
  min-height: 100vh;
}

Assigning Elements to Areas

Each child element references its area by name: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Grid places them automatically.

Middle Row Expansion

The middle row uses 1fr which fills all remaining viewport height after the fixed-height header and footer. This ensures the sidebars and main content always extend to fill the viewport — no explicit height calculations needed.

Responsive Collapse

On mobile, use a media query to redefine grid-template-areas as a single column stack: header, sidebar, main, aside, footer stacked vertically. The DOM order is maintained; only the visual grid template changes. Grid areas make responsive restructuring readable.

@media (max-width: 768px) {
  body {
    grid-template-areas: "header" "sidebar" "main" "aside" "footer";
    grid-template-columns: 1fr;
  }
}

Hiding Sidebars Responsively

On tablet, remove the right aside and expand main: redefine to "header header" "sidebar main" "footer footer" with grid-template-columns: 240px 1fr. Set aside { display: none } or move it below main in the area definition.

Gap and Padding

Add gap between grid tracks: gap: var(--spacing-4). Apply padding inside each area rather than on the grid container to keep spacing consistent. The header and footer typically get their own horizontal padding matching the grid's max-width alignment.

Nested Grids

The main content area can itself be a grid — a two-column article + sidebar inside the main area. Nested grids create content layout within the page shell layout without complex class hierarchies or deeply nested positioning.

Sticky Header

Make the header sticky: header { position: sticky; top: 0; z-index: 10; }. In a grid layout, sticky positioning on a grid child works as expected — the header sticks while main, sidebar, and aside scroll beneath it.

Sticky Sidebars in Holy Grail

Both sidebars can be sticky: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. They stay visible while main content scrolls — creating a three-panel layout where only the center scrolls.

Grid vs Flexbox for Page Layout

Use Grid for two-dimensional page-shell layouts like Holy Grail — Grid excels at placing items into named rows and columns simultaneously. Use Flexbox for one-dimensional component layouts (nav items in a row, card content in a column) within the grid areas.

Knowledge Check

What makes grid-template-areas particularly useful for responsive Holy Grail layouts?

Summary

CSS Grid makes the historically difficult Holy Grail Layout trivial: grid-template-areas names regions, 1fr for the middle row fills viewport height, and media queries redefine the area map for responsive collapse. Sticky headers and sidebars layer on top without additional complexity.

Frequently asked questions

Is the “Holy Grail Layout with Grid” lesson free?

Yes — the full text of “Holy Grail Layout with Grid” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Holy Grail Layout with Grid”?

Implement the classic holy grail layout with header, footer, main, and two sidebars using CSS Grid. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Holy Grail Layout with Grid” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy