How to create holy grail layout with grid in css

CssHow-ToBeginner · 4 min read

How to Create Holy Grail Layout with CSS Grid

Use display: grid on a container and define grid areas for header, footer, main content, and sidebars with grid-template-areas. Assign each child element to its grid area using grid-area to create the holy grail layout easily and responsively.

📐

Syntax

The holy grail layout uses CSS Grid with named grid areas to place header, footer, main content, and sidebars. The main properties are:

display: grid; to enable grid layout.
grid-template-columns and grid-template-rows to define the size of columns and rows.
grid-template-areas to name areas for easy placement.
grid-area on child elements to assign them to these named areas.

css

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
}

header { grid-area: header; }
.left { grid-area: left; }
main { grid-area: main; }
.right { grid-area: right; }
footer { grid-area: footer; }

💻

Example

This example shows a complete holy grail layout with a header, left sidebar, main content, right sidebar, and footer using CSS Grid. The layout is responsive and easy to read.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Holy Grail Layout with CSS Grid</title>
<style>
  body, html {
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
  }
  .container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 60px 1fr 40px;
    grid-template-areas:
      "header header header"
      "left main right"
      "footer footer footer";
    height: 100vh;
  }
  header {
    grid-area: header;
    background: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }
  .left {
    grid-area: left;
    background: #d9e6f2;
    padding: 1rem;
  }
  main {
    grid-area: main;
    background: #f5f7fa;
    padding: 1rem;
  }
  .right {
    grid-area: right;
    background: #d9e6f2;
    padding: 1rem;
  }
  footer {
    grid-area: footer;
    background: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
  }
</style>
</head>
<body>
  <div class="container">
    <header>Header</header>
    <aside class="left">Left Sidebar</aside>
    <main>Main Content</main>
    <aside class="right">Right Sidebar</aside>
    <footer>Footer</footer>
  </div>
</body>
</html>

Output

A full browser window with a blue header bar on top, a blue footer bar at bottom, a light blue left sidebar, a light blue right sidebar, and a white main content area in the center.

⚠️

Common Pitfalls

Common mistakes when creating the holy grail layout with CSS Grid include:

Not defining grid-template-areas properly, causing elements to overlap or not appear.
Forgetting to assign grid-area to child elements, so they don't appear in the intended grid cells.
Using fixed widths without flexible units, which breaks responsiveness.
Not setting container height, which can cause the layout to collapse vertically.

css

/* Wrong: Missing grid-area on children */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
}

header, .left, main, .right, footer {
  /* No grid-area assigned - elements stack */
}

/* Right: Assign grid-area */
header { grid-area: header; }
.left { grid-area: left; }
main { grid-area: main; }
.right { grid-area: right; }
footer { grid-area: footer; }

📊

Quick Reference

Summary tips for holy grail layout with CSS Grid:

Use grid-template-areas for clear layout structure.
Assign grid-area to each child element matching the template areas.
Use flexible units like fr for main content to fill available space.
Set container height (e.g., 100vh) for full viewport layouts.
Use semantic HTML elements like header, main, aside, and footer for accessibility.

✅

Key Takeaways

Use CSS Grid with named grid areas to create the holy grail layout easily.

Define grid-template-areas on the container and assign grid-area on children.

Use flexible units like fr for responsive main content sizing.

Set container height to ensure vertical layout fills the viewport.

Use semantic HTML elements for better accessibility and structure.