Skip to content
GreenSnippets

Header, sidebar, main and footer layout with grid

A full-height page layout with a sticky footer using grid-template-areas.

CSS
.page {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 15rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.page > header { grid-area: header; }
.page > nav    { grid-area: sidebar; }
.page > main   { grid-area: main; min-width: 0; }
.page > footer { grid-area: footer; }

@media (max-width: 40rem) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "sidebar" "main" "footer";
  }
}

Example / expected output

Output
<!-- <body class="page"><header>…</header><nav>…</nav><main>…</main><footer>…</footer></body> -->

How it works

Named grid areas make the structure readable. min-height: 100dvh plus a 1fr row for main pushes the footer to the bottom even on short pages. The layout collapses to a single column on small screens.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets