<div class="support-grid"></div>

<section class="grid-1">
  <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 class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>
  <div class="item-10">10</div>
  <div class="item-11">11</div>
  <div class="item-12">12</div>
  <div class="item-13">13</div>
  <div class="item-14">14</div>
  <div class="item-15">15</div>
  <div class="item-16">16</div>
  <div class="item-17">17</div>
  <div class="item-18">18</div>
</section>

body {
  background: #f5f7f8;
}

.grid-1 {
  padding-top: 40px;
  display: grid;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 2px;
  grid-auto-flow: column;
}

/* items */

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

/* specific item styles */

.item-1 {
  background: #b03532;
}
.item-2 {
  background: #33a8a5;
}
.item-3 {
  background: #ff9069;
}
.item-4 {
  background: #6a478f;
}
.item-5 {
  background: #3d8bb1;
}
.item-6 {
  background: #4464a1;
}
.item-7 {
  background: #e03f3f;
  grid-column: span 2;
  grid-row: span 2;
}
.item-8 {
  background: #59a627;
}
.item-9 {
  background: #b03532;
  grid-column: span 2;
  grid-row: span 2;
}
.item-10 {
  background: #4464a1;
}
.item-11 {
  background: #33a8a5;
}
.item-12 {
  background: #ff9069;
}
.item-13 {
  background: #3d8bb1;
}
.item-14 {
  background: #da6f2b;
}
.item-15 {
  background: #59a627;
}
.item-16 {
  background: #30997a;
}
.item-17 {
  background: #6a478f;
}
.item-18 {
  background: #da6f2b;
}