JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

CSS

.container {
  display: grid;
  grid-auto-columns: 25%;
  grid-auto-rows: 100px;
}
.box {
  border: 1px solid;
  box-sizing: border-box;
  grid-row-end: span 2;
  grid-column-end: span 2;
}
.box:last-child {
  grid-column-end: span 4;
}
.box:nth-last-child(1):nth-child(odd):not(:first-child),
.box:nth-last-child(2):nth-child(even) {
  grid-row-end: auto;
}