JSFiddle - React, Tailwind, and code Playground

HTML

<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></div>

CSS

body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

div {
  height: 50px;
  background: purple
}

div:nth-child(6n-1),
div:nth-child(6n) {
  grid-column: auto / span 2;
  background: green
}