CSS Grid Dashboard Layout Generator
Fixed sidebar, sticky topbar, scrolling content well. The admin-panel skeleton, without the framework.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.dashboard {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
gap: 0px;
grid-template-areas:
"topbar"
"main";
}
.dashboard > .topbar { grid-area: topbar; }
.dashboard > .main { grid-area: main; }
.dashboard > .sidebar { display: none; }
@media (min-width: 1024px) {
.dashboard {
grid-template-columns: 248px 1fr;
grid-template-areas:
"sidebar topbar"
"sidebar main";
}
.dashboard > .sidebar { grid-area: sidebar; }
}
How this layout works
A dashboard is really two nested problems: pin the chrome, then let exactly one region scroll. Grid solves the first half — 100dvh on the container with a 1fr content row means the sidebar and topbar never move.
Give the main area overflow: auto and min-height: 0. That second declaration is the one everybody forgets: grid items default to min-height: auto, which refuses to shrink below their content and quietly breaks the scroll.
Below 1024px the sidebar drops out entirely. In a real build you would move it into a drawer rather than deleting it — the generator emits display: none, which is your cue to swap in the off-canvas version.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
How do I make only the main area scroll in a dashboard?
height: 100dvh with a 1fr content row, then give the main area overflow: auto and min-height: 0. That second declaration is the one people miss — grid items default to min-height: auto and refuse to shrink below their content, which silently kills the scroll.What should the sidebar do on mobile?
display: none at the narrow breakpoint, which is your cue to swap the drawer in — shipping it permanently hidden loses the navigation entirely.How do I center a grid in CSS?
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
How to use it
-
Open the pattern
The dashboard layout loads into the editor already responsive, with every breakpoint set up.
-
Change the tracks
Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.
-
Redraw at another width
Move the ruler past a breakpoint marker and rearrange. Only the placement changes.
-
Copy the code
Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.