.grid {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 150px 1fr 50px;
}

/* Header should span all 3 columns. */
.header {
  grid-column: span 3;
}

/* Content should span 2 of 3 columns. */
.content {
  grid-column: span 2;
}

/* Footer should span all 3 columns. */
.footer {
  grid-column: span 3;
}



/*
The following isn't required because the sidebar span 1 cell by default, and will therefor be placed in the empty grid cell next to the content

If you wanted to be explicit you could set the following:

.sidebar {
  grid-column: span 1;
}

*/

body {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

.grid div {
  background: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}