CSS
Two-Column Layout (Sidebar & Main Content) with Grid
Construct a flexible two-column layout with a fixed-width sidebar and a fluid main content area using CSS Grid, ideal for application interfaces.
.grid-container-sidebar {
display: grid;
/* Define two columns: one auto-sized (for sidebar), one fluid (for content) */
/* Or: grid-template-columns: 250px 1fr; for a fixed 250px sidebar */
grid-template-columns: auto 1fr; /* Sidebar width adjusts to content, main takes rest */
min-height: 100vh; /* Ensures layout takes full viewport height */
gap: 1rem;
border: 1px solid #ccc;
}
.sidebar {
background-color: #f0f4c3;
padding: 1rem;
border-right: 1px solid #cddc39;
/* For fixed width sidebar: width: 250px; if grid-template-columns was auto 1fr */
}
.main-content-grid {
background-color: #e0f2f7;
padding: 1rem;
border: 1px solid #03a9f4;
}
/* Basic styling for demonstration */
.grid-container-sidebar h2 { margin-top: 0; }
How it works: This code snippet establishes a common two-column page layout using CSS Grid, suitable for designs with a sidebar and a main content area. `display: grid` initiates the grid, and `grid-template-columns: auto 1fr` defines two columns: the first (`auto`) sizes itself to its content (the sidebar), and the second (`1fr`) takes up all the remaining available horizontal space (for the main content). `min-height: 100vh` ensures the container occupies the full viewport height.