CSS Grid Holy Grail Layout Generator
Header, footer, two flanking sidebars and a fluid centre column — the layout CSS Grid finally made easy.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.holy-grail {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
gap: 16px;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
.holy-grail > .header { grid-area: header; }
.holy-grail > .nav { grid-area: nav; }
.holy-grail > .main { grid-area: main; }
.holy-grail > .aside { grid-area: aside; }
.holy-grail > .footer { grid-area: footer; }
@media (min-width: 900px) {
.holy-grail {
grid-template-columns: 200px 1fr 220px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
}
How this layout works
The Holy Grail is a full-height page with a header, a footer, a fixed-width navigation column, a fixed-width aside, and a main column that soaks up whatever is left. Before Grid it needed floats, negative margins or table display to hold together.
The whole thing is three columns and three rows. 1fr on the middle column does the fluid work; 1fr on the middle row pushes the footer to the bottom of the viewport when content is short.
On mobile everything collapses to one column and the source order takes over. Note that nav sits above main here — matching DOM order, so keyboard and screen-reader users get the same sequence sighted users do.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
What is the Holy Grail layout?
How do I stick the footer to the bottom on short pages?
min-height: 100dvh and make the content row 1fr. The fluid row absorbs the leftover space, pushing the footer down without position: fixed.How do I center a grid in CSS?
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
How to use it
-
Open the pattern
The holy grail layout loads into the editor already responsive, with every breakpoint set up.
-
Change the tracks
Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.
-
Redraw at another width
Move the ruler past a breakpoint marker and rearrange. Only the placement changes.
-
Copy the code
Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.