CSS
Responsive CSS Grid Two-Column Layout with Sidebar
Create a flexible, responsive two-column layout using CSS Grid, transitioning from a stacked mobile view to a sidebar and main content desktop view.
<div class="grid-container">
<header class="grid-header">Header</header>
<nav class="grid-sidebar">Sidebar</nav>
<main class="grid-main">Main Content</main>
<footer class="grid-footer">Footer</footer>
</div>
<style>
.grid-container {
display: grid;
gap: 1rem;
min-height: 100vh; /* Full viewport height */
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
grid-template-rows: auto 1fr auto auto; /* Header, Footer auto; Sidebar/Main take remaining */
}
.grid-header { background-color: #f7d9a7; padding: 1em; text-align: center; }
.grid-sidebar { background-color: #a7d9f7; padding: 1em; }
.grid-main { background-color: #d9f7a7; padding: 1em; }
.grid-footer { background-color: #f7a7d9; padding: 1em; text-align: center; }
/* Assign grid areas */
.grid-header { grid-area: header; }
.grid-sidebar { grid-area: sidebar; }
.grid-main { grid-area: main; }
.grid-footer { grid-area: footer; }
/* Desktop layout */
@media (min-width: 768px) {
.grid-container {
grid-template-columns: 200px 1fr; /* 200px sidebar, rest for main */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: auto 1fr auto; /* Header auto, Main/Sidebar fill, Footer auto */
}
}
</style>
How it works: This snippet demonstrates how to create a responsive two-column layout using CSS Grid's `grid-template-areas`. On smaller screens (mobile-first approach), the layout stacks items vertically. For larger screens, a media query activates a two-column grid with a fixed-width sidebar and a fluid main content area. `grid-template-areas` provides a clear visual representation of the layout structure, making it easy to understand and modify. `grid-template-rows: auto 1fr auto` ensures the header and footer take only necessary space, while the main content (and sidebar) expands to fill the remaining vertical space.