<div class="grid">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
</div>
body {
  padding-top: 20px;
  background: #f5f7f8;
}

div {
  color: white;
  font-size: 20px;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-areas: "a a a"
	                     "b b b";
	grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
	grid-template-columns: auto 1fr auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.grid div:nth-child(1) {
  background: #b03532;
}
.grid div:nth-child(2) {
  background: #33a8a5;
}
.grid div:nth-child(3) {
  background: #30997a;
}
.grid div:nth-child(4) {
  background: #6a478f;
}
.grid div:nth-child(5) {
  background: #da6f2b;
}
.grid div:nth-child(6) {
  background: #89afe8;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.