CSS dynamic grid pattern

.grid {
  display:grid;
  grid-auto-flow:dense; /* dont forget this to fill all the tracks */
  grid-auto-rows:100px; /* the height of one row */
  grid-gap:5px;
}
.grid :nth-child(5n + 1),
.grid :nth-child(5n + 4) {
  grid-column:span 2; /* 1st and 4th need 2 columns */
}
.grid :nth-child(5n + 5) { 
  grid-area: span 2/4; /* 5th at column 4 taking 2 rows */
}
.grid :nth-child(5n + 3) {
  grid-column: 1; /* 3rd at column 1 */
}

/**/
.grid {
  max-width:600px;
  margin:auto;
  counter-reset:num;
}
.grid *{
  border:2px solid;
  font-size:30px;
  box-sizing:border-box;
  font-family:sans-serif;
  display:grid;
  place-content:center;
}
.grid *:before {
  content:counter(num);
  counter-increment:num;
}

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