CSS
CSS Grid: Implementing the Holy Grail Layout
Recreate the classic 'Holy Grail' layout (header, footer, main content with two sidebars) efficiently using modern CSS Grid properties for robust design.
.holy-grail-layout {
display: grid;
grid-template-columns: minmax(150px, 1fr) 3fr minmax(150px, 1fr); /* Sidebar, Main, 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;
gap: 10px; /* Space between grid areas */
}
header { grid-area: header; background-color: #f0f0f0; padding: 20px; }
nav { grid-area: nav; background-color: #e0e0e0; padding: 20px; }
main { grid-area: main; background-color: #f9f9f9; padding: 20px; }
aside { grid-area: aside; background-color: #e0e0e0; padding: 20px; }
footer { grid-area: footer; background-color: #333; color: white; padding: 20px; text-align: center; }
How it works: This snippet uses CSS Grid's `grid-template-areas` for semantic layout organization. `grid-template-columns` defines three columns (left sidebar, main content, right sidebar) with flexible widths. `grid-template-rows` defines three rows (header, content, footer). Each area is then assigned to a grid item using `grid-area`. `min-height: 100vh` ensures the layout fills the viewport, and `1fr` on the content row allows it to expand, making the overall structure responsive.