CSS Grid: Example: grid layout with header, sidebar, content and footer

Here is a simple example of using CSS Grid to create a site layout that provides a header op top, a main part with sidebar on the left and content on the right, and a footer afterwards.

Layout example

Here’s the markup:

<div class="wrapper">

and here’s the CSS:

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
    "header  header"
    "sidebar content"
    "footer  footer";

I added some colors to make it prettier, but basically it assigns to every different tag a grid-area name, which is used in the grid-template-areas property in .wrapper.

When the layout is smaller we can put the sidebar below the content using a media query:

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;

See on CodePen

Lessons in this unit:

0: Introduction
1: grid-template-columns and grid-template-rows
2: Setting columns and rows dimensions
3: Gap between the cells
4: Span items on multiple columns and/or rows
5: Minimum row width
6: Layout using grid-template-areas
7: DEMO Example: simple grid layout
8: ▶︎ DEMO Example: grid layout with header, sidebar, content and footer