CSS
Create a Holy Grail Layout with CSS Grid
Master the 'Holy Grail' layout, featuring header, footer, and three main columns (sidebar, content, sidebar) using CSS Grid for a highly structured and responsive page architecture.
.holy-grail-layout {
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Content (takes available space), Footer */
grid-template-columns: minmax(150px, 1fr) 4fr minmax(150px, 1fr); /* Sidebars, Main Content */
min-height: 100vh; /* Ensures layout fills viewport height */
gap: 15px; /* Spacing between grid areas */
}
.header {
grid-column: 1 / -1; /* Spans all columns */
background-color: #f8f9fa;
padding: 20px;
}
.left-sidebar {
grid-column: 1;
background-color: #e9ecef;
padding: 15px;
}
.main-content {
grid-column: 2;
background-color: #ffffff;
padding: 15px;
}
.right-sidebar {
grid-column: 3;
background-color: #e9ecef;
padding: 15px;
}
.footer {
grid-column: 1 / -1; /* Spans all columns */
background-color: #343a40;
color: white;
padding: 20px;
text-align: center;
}
How it works: This snippet tackles the classic 'Holy Grail' layout problem using CSS Grid. It defines a grid with a header, footer, and three main content areas (left sidebar, main content, right sidebar). `grid-template-rows` and `grid-template-columns` define the structure and relative sizing, while `grid-column: 1 / -1` ensures the header and footer span all columns. `min-height: 100vh` ensures the layout always fills the entire viewport height, creating a robust page structure.