CSS
Flexible Three-Column Holy Grail Layout with Flexbox
Learn to build a classic three-column Holy Grail layout using CSS Flexbox, allowing sidebars to shrink and grow while the main content takes available space.
.container {
display: flex;
min-height: 100vh; /* Or a specific height */
}
.sidebar-left, .sidebar-right {
flex: 0 0 200px; /* Fixed width, non-growing/shrinking */
background-color: #f0f0f0;
padding: 15px;
}
.main-content {
flex: 1; /* Grows and shrinks to fill available space */
background-color: #ffffff;
padding: 15px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar-left, .sidebar-right {
flex: none; /* Reset flex properties */
width: 100%; /* Take full width */
order: 2; /* Adjust order for mobile */
}
.main-content {
order: 1; /* Adjust order for mobile */
}
}
How it works: This snippet demonstrates a Holy Grail layout where a main content area expands to fill available space between two fixed-width sidebars. Flexbox `flex: 1` on the main content ensures it's responsive. Media queries reconfigure the layout to a column stack on smaller screens, adjusting `flex-direction` and `order` for an optimal mobile experience, making it a highly adaptable layout for various screen sizes.