CSS
Build a Holy Grail Layout with Flexbox
Implement the classic Holy Grail layout (header, footer, main content with two sidebars) using Flexbox for a flexible and responsive page structure.
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* Make container fill viewport */
font-family: sans-serif;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
}
.main-content-wrapper {
display: flex;
flex: 1; /* Allows this section to grow and take available vertical space */
}
.sidebar-left, .sidebar-right {
width: 200px; /* Fixed width sidebars */
background-color: #f0f0f0;
padding: 1em;
flex-shrink: 0; /* Prevents sidebars from shrinking */
}
.main-content {
flex: 1; /* Allows main content to grow and take available horizontal space */
background-color: #fff;
padding: 1em;
}
How it works: This snippet constructs a Holy Grail layout using Flexbox. The main `.container` is a column flex container (`flex-direction: column`) occupying the full viewport height. The `.main-content-wrapper` uses `flex: 1` to occupy remaining vertical space and then becomes a row flex container itself. Inside, `.main-content` uses `flex: 1` to expand horizontally and fill available space, while `.sidebar-left` and `.sidebar-right` maintain fixed widths due to `width` and `flex-shrink: 0`.