Holy Grail Layout with CSS Grid

Last Updated : 06 Sep, 2023

The Holy Grail layout is a widely used web layout that consists of a header, footer, left sidebar, right sidebar, and main content area. This layout is expected to be responsive and adapt to different screen sizes. Despite the varying content lengths, the layout should maintain its structure and ensure the header and footer are always at the top and bottom, respectively.

In the Holy Grail layout, we will have 3 rows and 3 columns. The header and footer will span all three columns, while the left sidebar, main content, and right sidebar will occupy their respective columns. By specifying the row and column properties, we can achieve the desired layout.

In this article, we will implement this layout using CSS Grid, which offers a straightforward and flexible solution.

Syntax:

.parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

Approach:

Create a CSS file that will contain our CSS styles.
Define the HTML structure using a parent container that wraps all the content: header, left sidebar, right sidebar, main content, and footer.
Inside the parent container, create separate div elements for each section: header, left sidebar, main content, right sidebar, and footer.
Add placeholder content to each section to visualize the layout structure.

Example: This example describes the implementation of the Holy Grail Layout by implementing the CSS Grid Property.

HTML

<!-- index.html  -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href="style.css" /> 
    <title>Holy Grail Layout</title> 
</head> 
  
<body> 
    <div class="parent"> 
        <header> 
            This is header 
        </header> 
        <div class="left-sidebar"> 
            I am left sidebar 
        </div> 
        <main> 
            I am main content 
        </main> 
        <div class="right-sidebar"> 
            I am right sidebar and 
            I am having more text 
        </div> 
        <footer>I am footer</footer> 
    </div> 
</body> 
  
</html>

style.css

CSS

/* style.css */
html, 
body { 
    padding: 0; 
    margin: 0; 
} 
  
.parent { 
    height: 100vh; 
    display: grid; 
    grid: auto 1fr auto / 100px 1fr 100px; 
} 
  
header, 
footer, 
.left-sidebar, 
main, 
.right-sidebar { 
    padding: 10px; 
} 
  
header { 
    grid-column: 1 / 4; 
    background-color: red; 
} 
  
.left-sidebar { 
    grid-column: 1 / 2; 
    background-color: green; 
} 
  
main { 
    grid-column: 2 / 3; 
    background-color: plum; 
} 
  
.right-sidebar { 
    grid-column: 3 / 4; 
    background-color: greenyellow; 
} 
  
footer { 
    grid-column: 1 / 4; 
    background-color: blue; 
    color: white; 
} 
  
@media (max-width: 768px) { 
    .parent { 
        grid: repeat(5, 1fr) / 1fr; 
    } 
  
    header, 
    footer, 
    .left-sidebar, 
    main, 
    .right-sidebar { 
        grid-column: 1 / 2; 
    } 
}