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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!