CSS
Crafting a Responsive Admin Dashboard Layout with CSS Grid
Design a common admin dashboard layout with a fixed header, persistent sidebar, and main content area using the power of CSS Grid for robust structure.
body {
margin: 0;
font-family: sans-serif;
display: grid;
grid-template-columns: 250px 1fr; /* Sidebar width and main content */
grid-template-rows: auto 1fr auto; /* Header, main, footer heights */
grid-template-areas:
"sidebar header"
"sidebar main"
"sidebar footer";
min-height: 100vh;
}
header {
grid-area: header;
background-color: #4CAF50;
color: white;
padding: 1rem;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #333;
color: white;
padding: 1rem;
}
main {
grid-area: main;
background-color: #f4f4f4;
padding: 1rem;
overflow-y: auto; /* Allow main content to scroll */
}
footer {
grid-area: footer;
background-color: #666;
color: white;
padding: 0.5rem;
text-align: center;
}
/* Responsive adjustments */
@media (max-width: 768px) {
body {
grid-template-columns: 1fr; /* Stack everything vertically */
grid-template-rows: auto auto 1fr auto; /* Header, sidebar, main, footer */
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
.sidebar {
height: auto; /* Remove fixed height for mobile */
padding-bottom: 0;
}
}
How it works: This snippet provides a flexible and responsive layout for an admin dashboard or similar web application using CSS Grid. It defines named grid areas (`header`, `sidebar`, `main`, `footer`) and assigns elements to them, creating a fixed sidebar, top header, and a scrollable main content area. `grid-template-columns` and `grid-template-rows` define the initial structure, and media queries adapt the layout to a single column stack for smaller screens.