CSS
Create a Fixed Sidebar and Fluid Main Content Layout with CSS Grid
Build a responsive two-column layout using CSS Grid where one column has a fixed width (e.g., a sidebar) and the other (main content) automatically fills the remaining space.
.grid-layout {
display: grid;
grid-template-columns: 250px 1fr; /* Fixed 250px sidebar, 1fr for main content */
gap: 20px;
min-height: 100vh; /* Example: full viewport height */
}
.sidebar {
background-color: #f0f0f0;
padding: 20px;
/* Optional: position: sticky; top: 0; for a sticky sidebar scroll */
}
.main-content {
background-color: #ffffff;
padding: 20px;
}
/* Optional: Media query for single column on small screens */
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr; /* Stacks into a single column */
}
}
How it works: This snippet demonstrates a common two-column layout using CSS Grid where one column has a fixed width and the other is fluid. The `grid-template-columns: 250px 1fr;` property defines two columns: the first is exactly 250 pixels wide (for the sidebar), and the second (`1fr`) takes up all the remaining available space. This creates a flexible layout that can easily adapt to different screen sizes, optionally stacking to a single column with a media query.