JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="grid">
	<div class="block">1 Lorem ipsum dolor sit amet.</div>
	<div class="block">2 Lorem ipsum dolor sit amet.</div>
	<div class="block">3 Lorem ipsum dolor sit amet.</div>
	<div class="block">4 Lorem ipsum dolor sit amet.</div>
	<div class="block">5 Lorem ipsum dolor sit amet.</div>
	
	<div class="block">1 Lorem ipsum dolor sit amet.</div>
	<div class="block">2 Lorem ipsum dolor sit amet.</div>
	<div class="block">3 Lorem ipsum dolor sit amet.</div>
	<div class="block">4 Lorem ipsum dolor sit amet.</div>
	<div class="block">5 Lorem ipsum dolor sit amet.</div>
	
</div>

CSS

.block {
  background: green;
  padding: 1rem;
  color: #fff;
}

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

.block:nth-child(5n + 1) {
  background: red;
}

.block:nth-child(5n + 2) {
  background: blue;
  grid-column: auto / span 2;
}

.block:nth-child(5n + 3) {
  background: magenta;
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}