JSFiddle - React, Tailwind, and code Playground

HTML

<div data-num="01"></div>
<div data-num="02"></div>
<div data-num="03"></div>
<div data-num="04" class="big-cell"></div>
<div data-num="05" class="big-cell"></div>
<div data-num="06"></div>
<div data-num="07"></div>
<div data-num="08"></div>
<div data-num="09"></div>
<div data-num="10"></div>
<div data-num="11"></div>
<div data-num="12"></div>
<div data-num="13"></div>
<div data-num="14"></div>
<div data-num="15"></div>
<div data-num="16"></div>
<div data-num="17"></div>
<div data-num="18"></div>
<div data-num="19"></div>
<div data-num="20"></div>

SCSS

body {
   display: grid;
   grid-template-columns: repeat(6, 100px);
   grid-auto-rows: 100px;
   grid-gap: 5px 5px;
   grid-auto-flow: row dense;
}

div {
  position: relative;
  background: #000;
  
  &::after {
    content: attr(data-num);
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
  }
}

.big-cell {
  grid-column-end: span 2;
  grid-row-end: span 2;
}