An admin dashboard is a different design problem from a marketing site, and templates that treat it the same way tend to fall apart once real data enters the picture. Marketing pages are read top to bottom once. Dashboards are scanned repeatedly, by the same person, often for hours a day — which means density, scan-ability, and consistent structure matter more than visual flourish. A dashboard template that looks striking in a screenshot with three rows of demo data can become genuinely hard to use once it's holding three hundred real rows.
The layout skeleton almost every dashboard needs
Regardless of what the dashboard actually manages — users, orders, analytics — the layout shell is close to universal: a fixed sidebar for navigation, a top bar for search/account/notifications, and a main content area that scrolls independently. CSS Grid's named template areas make this explicit and easy to reason about:
...
...
...
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar topbar"
"sidebar content";
height: 100vh;
}
.sidebar { grid-area: sidebar; overflow-y: auto; }
.topbar { grid-area: topbar; }
.content { grid-area: content; overflow-y: auto; padding: 24px; }
The key detail: overflow-y: auto on both .sidebar and .content independently, with height: 100vh on the parent grid. This means a long nav list scrolls on its own without dragging the main content with it, and vice versa — the single most common thing broken dashboard layouts get wrong is letting the whole page scroll as one unit, which makes the sidebar disappear off-screen the moment someone scrolls down a long table.
Top comments (0)