CSS
Holy Grail Layout using CSS Grid Areas
Implement the classic 'Holy Grail' three-column layout (header, nav, main, aside, footer) using named grid areas for improved readability and maintainability in CSS Grid.
.holy-grail-layout {
display: grid;
grid-template-columns: 200px 1fr 150px; /* Nav | Main | Aside */
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 always at the bottom */
}
header { grid-area: header; background-color: #add8e6; padding: 15px; text-align: center; }
nav { grid-area: nav; background-color: #90ee90; padding: 15px; }
main { grid-area: main; background-color: #ffffff; padding: 15px; }
aside { grid-area: aside; background-color: #ffb6c1; padding: 15px; }
footer { grid-area: footer; background-color: #add8e6; padding: 15px; text-align: center; }
How it works: This snippet provides a robust solution for the 'Holy Grail' layout using CSS Grid's named areas. By defining `grid-template-areas`, you can visually structure your layout within the CSS, making it highly intuitive. The `grid-template-columns` and `grid-template-rows` define the dimensions of each area. The `min-height: 100vh` on the container ensures the footer stays at the bottom of the viewport even if the main content is sparse. This method offers excellent control and clarity for complex page layouts.