CSS
Implement Holy Grail Layout with CSS Grid
Master the classic Holy Grail layout using CSS Grid, featuring a header, footer, and three main columns (sidebar-left, main content, sidebar-right) with minimal, semantic code.
body {
display: grid;
grid-template-columns: minmax(150px, 1fr) 3fr minmax(150px, 1fr); /* left-sidebar, main, right-sidebar */
grid-template-rows: auto 1fr auto; /* header, content, footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Ensures footer is at bottom */
margin: 0;
}
header { grid-area: header; background: #a8dadc; padding: 1em; }
nav { grid-area: nav; background: #457b9d; padding: 1em; }
main { grid-area: main; background: #f1faee; padding: 1em; }
aside { grid-area: aside; background: #457b9d; padding: 1em; }
footer { grid-area: footer; background: #a8dadc; padding: 1em; }
/* Basic styling for visibility */
body > * {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
border: 1px solid #1d3557;
}
header, footer { color: #1d3557; }
main { color: #1d3557; }
/* HTML Structure */
/*
<header>Header</header>
<nav>Left Sidebar</nav>
<main>Main Content</main>
<aside>Right Sidebar</aside>
<footer>Footer</footer>
*/
How it works: This snippet demonstrates the "Holy Grail" layout, a common web design pattern, implemented efficiently with CSS Grid. By defining `grid-template-areas`, we assign semantic names to different regions of the layout. The `grid-template-columns` and `grid-template-rows` properties specify the dimensions of these areas. `min-height: 100vh` on the body ensures the layout takes full viewport height, pushing the footer to the bottom. Each element is then placed into its respective `grid-area`.