Holy grail layout
Header, footer, two sidebars and a main column — in nine lines of grid.
<div class="page">
<header>Header</header>
<nav>Navigation</nav>
<main>
<h1>Main content</h1>
<p>This column takes whatever space the two sidebars leave. Resize the preview to see the
sidebars move above and below it.</p>
</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; }
.page {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
gap: 14px;
min-height: 100vh;
padding: 14px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
/* everything below is decoration, not layout */
header, nav, main, aside, footer {
background: #fff;
border: 1px solid #e2e7ef;
border-radius: 10px;
padding: 18px 20px;
color: #5b6b83;
font-size: .92rem;
}
main { color: #16202e; }
main h1 { font-size: 1.3rem; margin-bottom: 8px; }
@media (max-width: 760px) {
.page {
grid-template-areas:
"header"
"main"
"nav"
"aside"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}How it works
This layout was hard enough in the float era that it got a nickname. With grid template areas it is one property, and you can read the page shape directly out of the CSS.
The areas diagram is the layout. The three quoted rows in grid-template-areas are a picture of the page. Changing the arrangement means editing that diagram, not recalculating widths and margins.
1fr in the middle column means main takes whatever the two fixed sidebars leave. No calc(100% - 400px), and it stays correct if you change a sidebar width.
1fr on the middle row plus min-height: 100vh pushes the footer to the bottom of the viewport on a short page, and lets it sit below the content on a long one. This is the sticky-footer problem, solved for free as a side effect.
Main comes second in the mobile order, not third. The source order is header, nav, main, aside, footer — which is the right reading order for assistive technology. On mobile the areas diagram promotes main above nav so the content appears first visually. Grid lets the two orders differ, which is exactly the case this feature exists for.
Accessibility notes
Every region is a real landmark element — header, nav, main, aside, footer — rather than five divs with classes. Screen reader users navigate by landmark, and this gives them the whole page structure for free.
Only one <main> per page. If you have two <nav> elements, give each an aria-label so they can be told apart.
Because grid can reorder visually without changing the DOM, check that your tab order still makes sense after a reorder. Here it does: main is after nav in the source, so keyboard users reach navigation first, which is the conventional order.
Making it yours
Sidebar widths are the two fixed values in grid-template-columns. Use minmax(160px, 220px) instead of a fixed pixel value if you want them to flex a little before the layout breaks to one column.
For a left sidebar only, delete aside from the markup and use two columns. The areas diagram is the only place you need to change.
Take care with 100vh on mobile browsers: the value includes the area behind the address bar, so a full-height layout can be slightly taller than the visible screen. 100dvh fixes it where supported, and degrades to the same behaviour where it is not.
Related templates
Centering recipes
Six ways to centre something, and which one to use when.
HTMLCSSResponsive grid without media queries
Four grid recipes that reflow on their own, using auto-fit, minmax and container queries.
HTMLCSSSticky footer
A footer that sits at the bottom of the viewport on short pages and below the content on long ones.
HTMLCSSJavaScriptSingle-file landing page
A complete landing page in one file — hero, features, call to action.
HTMLCSSCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.