CSS Grid Sticky Header Layout Generator
A header that stays put while the page scrolls, over a centred content column.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.sticky-header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
gap: 0;
grid-template-areas:
"header"
"main"
"footer";
}
.sticky-header > .header { grid-area: header; }
.sticky-header > .main { grid-area: main; }
.sticky-header > .footer { grid-area: footer; }
@media (min-width: 900px) {
.sticky-header {
grid-template-columns: 1fr min(1100px, 100%) 1fr;
grid-template-areas:
"header header header"
". main ."
"footer footer footer";
}
}
How this layout works
The grid does not make the header sticky — position: sticky; top: 0 on the header does. What the grid gives you is a header row of auto and a content row of 1fr, so the header is exactly as tall as its contents and the body takes the rest.
Sticky fails silently if any ancestor has overflow: hidden or overflow: clip. That single declaration, often added elsewhere to stop a horizontal scrollbar, is the reason most "sticky is not working" bugs happen.
At desktop the content sits in a centred track — 1fr min(1100px, 100%) 1fr — while the header still spans all three. That is how you get a full-width bar over measured content without a wrapper div inside the header.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
Why is position: sticky not working on my header?
overflow: hidden, overflow: clip or overflow: auto — sticky is measured against the nearest scrolling ancestor, and that declaration creates one. The other cause is a missing top value, which sticky requires.Should the header row be auto or a fixed height?
auto. A fixed header height breaks the moment the logo, a search field or a second nav line changes size, and auto already gives you a row that is exactly as tall as the header needs.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 sticky header 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.
More in Page shells
- Holy Grail Layout
- Dashboard Layout
- Sidebar Layout
- App Shell
- Admin Panel Layout
- Sticky Footer Layout
- Documentation Layout