CSS
Implement a Fixed Sidebar and Fluid Main Content Grid Layout
Effortlessly create a classic web layout with a fixed-width sidebar and a main content area that expands to fill the remaining space using CSS Grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Sidebar Grid Layout</title>
<style>
body {
font-family: sans-serif;
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto; /* For potential header/footer not in snippet */
background-color: #f0f2f5;
}
.layout-container {
display: grid;
/* Define columns: 250px for sidebar, remaining space for main content */
grid-template-columns: 250px 1fr;
gap: 20px;
margin: 20px;
border: 2px solid #a0a0a0;
border-radius: 8px;
overflow: hidden; /* To contain border-radius on children */
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
flex-grow: 1; /* Allows container to grow if body uses flex */
}
.sidebar {
background-color: #3f51b5; /* Indigo */
color: white;
padding: 20px;
/* Explicitly place in first column, spans across rows if needed */
grid-column: 1;
grid-row: 1;
}
.main-content {
background-color: #ffffff;
padding: 20px;
/* Explicitly place in second column, spans across rows if needed */
grid-column: 2;
grid-row: 1;
}
h2 {
margin-top: 0;
color: inherit;
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin-bottom: 10px;
}
ul li a {
color: white;
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
}
/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
.layout-container {
grid-template-columns: 1fr; /* Stack sidebar and main content */
grid-template-rows: auto 1fr;
}
.sidebar {
grid-column: 1; /* Sidebar takes full width */
grid-row: 1; /* Sidebar on top */
}
.main-content {
grid-column: 1; /* Main content takes full width */
grid-row: 2; /* Main content below sidebar */
}
}
</style>
</head>
<body>
<div class="layout-container">
<aside class="sidebar">
<h2>Navigation</h2>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Reports</a></li>
</ul>
</aside>
<main class="main-content">
<h2>Welcome to the Main Content Area</h2>
<p>This area expands to fill the remaining horizontal space next to the fixed-width sidebar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</main>
</div>
</body>
</html>
How it works: This snippet demonstrates how to create a common two-column web layout using CSS Grid: a fixed-width sidebar and a main content area that takes up the remaining available space. The `grid-template-columns: 250px 1fr;` property is key, defining the first column to be 250 pixels wide and the second column to take up all (`1fr`) of the free space. This provides a robust and flexible layout that scales beautifully, and the included media query demonstrates how to easily adapt this to a single-column, stacked layout for smaller screens, enhancing responsiveness.