CSS
Build the Holy Grail Layout with CSS Grid
Construct the versatile "Holy Grail" three-column layout (header, nav, content, sidebar, footer) efficiently using the powerful features of CSS Grid for modern web design.
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: auto 1fr auto; /* Header/Footer auto-height, Main content fills space */
grid-template-columns: 200px 1fr 200px; /* Nav/Aside fixed width, Main content fills space */
min-height: 100vh; /* Ensure grid fills viewport height */
gap: 10px;
}
.header { grid-area: header; background: lightcoral; padding: 20px; }
.nav { grid-area: nav; background: lightblue; padding: 20px; }
.main { grid-area: main; background: lightgreen; padding: 20px; }
.aside { grid-area: aside; background: lightgoldenrodyellow; padding: 20px; }
.footer { grid-area: footer; background: lightslategray; color: white; padding: 20px; }
How it works: This code implements the classic Holy Grail layout. `display: grid` initiates the grid. `grid-template-areas` provides a clear, visual representation of the layout. `grid-template-rows` defines the heights of the rows (header and footer auto, main content fills remaining vertical space). `grid-template-columns` defines column widths (navigation and aside fixed, main content fills remaining horizontal space). Each child then uses `grid-area` to assign itself to a named area.