Holy Grail Layout with Grid
Implement the classic holy grail layout with header, footer, main, and two sidebars using CSS Grid.
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;
}All lessons in this course
- Sticky Footer and Sidebar Layout
- Holy Grail Layout with Grid
- Masonry Layout: CSS and JS Approaches
- Intrinsic Design: Content-Driven Sizing