CSS
Crafting a Holy Grail Layout with Modern CSS Grid
Effortlessly build the classic Holy Grail layout (header, footer, main content with two sidebars) using powerful CSS Grid techniques for structured web pages.
body {
margin: 0;
padding: 0;
display: grid;
/* Define columns: fixed width for sidebars, 1fr for main content */
grid-template-columns: 200px 1fr 200px;
/* Define rows: auto for header/footer, 1fr for content area */
grid-template-rows: auto 1fr auto;
/* Assign areas to make layout definition intuitive */
grid-template-areas:
"header header header"
"left-sidebar main right-sidebar"
"footer footer footer";
min-height: 100vh; /* Ensure full viewport height */
}
header {
grid-area: header;
background-color: #0056b3;
color: white;
padding: 20px;
text-align: center;
}
.left-sidebar {
grid-area: left-sidebar;
background-color: #f0f8ff;
padding: 15px;
}
main {
grid-area: main;
background-color: #ffffff;
padding: 20px;
}
.right-sidebar {
grid-area: right-sidebar;
background-color: #f0f8ff;
padding: 15px;
}
footer {
grid-area: footer;
background-color: #343a40;
color: white;
padding: 15px;
text-align: center;
}
How it works: The Holy Grail layout, featuring a header, footer, and a main content area flanked by two sidebars, is elegantly created with CSS Grid. By using `grid-template-areas`, we visually map out the layout structure, assigning names like 'header', 'main', and 'left-sidebar' to different sections. Then, each HTML element uses the `grid-area` property to declare which named area it occupies. This approach makes complex layouts readable and easy to modify, while `min-height: 100vh` ensures the layout always spans the full viewport height.