<div class="grid">
  <div>Content</div>
  <div class="full">Full width</div>
  <div>Content</div>
</div>

.grid {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 150px;
  grid-template-columns: 
    [full-start] minmax(1em, 1fr) 
    [main-start] minmax(0, 40em) [main-end]
    minmax(1em, 1fr) [full-end];
}

.grid > * {
  grid-column: main-start ;
}

.grid > .full {
  grid-column: full-start / full-end;
}

.grid > div {
  background-color: rgb(144, 122, 214);
  font-weight: bold;
  font-family: Baloo, sans-serif;
  font-size: 2.157rem;
  padding: 10px;
  border-radius: 5px;
}

.grid > div:nth-child(odd) {
  background-color: rgb(218, 191, 255);
}

External CSS

  1. https://codepen.io/rachelandrew/pen/QpBKad.css
  2. https://fonts.googleapis.com/css?family=Baloo|Raleway

External JavaScript

This Pen doesn't use any external JavaScript resources.