New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
My header, sidebar, main content and footer are each a separate mess of floats and heights that never quite line up.
What you'll have at the end
A working page shell (header, sidebar, main, footer) whose layout is entirely described by grid-template-areas, at two breakpoints
You need
A page's header, main, aside and footer landmarks already sitting inside one wrapping div, with no grid or other layout CSS applied to any of them yet.
Not covered
Reordering the shell so its visual order ever runs ahead of the HTML's own order for keyboard and screen-reader users. This shell always keeps main ahead of sidebar in both places at once.
Leans on
A grid layout whose tab order doesn't match what's on screen
reach for this if the sidebar ever needs to render before main visually while main stays first in the HTML, since that mismatch is exactly what this shell was built to avoid.
Fix a 100vh section that clips behind the mobile address bar
for the full reasoning behind pairing the plain viewport unit with its small-viewport twin on the shell's own minimum height.
Build a sticky footer for pages with short content
for the same short-page footer problem solved with Flexbox instead, on a layout that isn't built with Grid at all.
Checked 20 Aug 2026
Part of the CSS Grid Layout cookbook