CSS
Create Holy Grail Layout with Flexbox (No Media Queries)
Build a flexible three-column (sidebars, main content) 'Holy Grail' layout using Flexbox, which adapts without needing traditional media queries for responsiveness by wrapping.
.holy-grail-layout {
display: flex;
flex-wrap: wrap; /* Allows items to wrap onto new lines on small screens */
min-height: 100vh; /* Ensures layout takes full viewport height */
}
.sidebar {
flex: 0 0 200px; /* fixed width, no grow/shrink */
background-color: #e6e6e6;
padding: 15px;
}
.main-content {
flex: 1 1 auto; /* allows growing and shrinking, takes available space */
min-width: 300px; /* ensure main content has a minimum width before sidebars wrap */
background-color: #f5f5f5;
padding: 15px;
order: 2; /* Visually places main content between sidebars */
}
.left-sidebar {
order: 1;
}
.right-sidebar {
order: 3;
}
How it works: The container uses `display: flex` and `flex-wrap: wrap`. Sidebars have `flex: 0 0 200px` for a fixed width. The `main-content` uses `flex: 1 1 auto` to expand and fill available space, with `min-width` ensuring it doesn't get too small before sidebars wrap. `order` properties maintain the visual flow across different screen sizes when items wrap.