JSFiddle - React, Tailwind, and code Playground

by StartPolymer

HTML

<div class="parent">
  <div class="item item--1">1</div>
  <div class="item item--2">2</div>
  <div class="item item--3">3</div>
  <div class="item item--4">4</div>
  <div class="item item--5">5</div>
  <div class="item item--6">6</div>
  <div class="item item--7">7</div>
  <div class="item item--8">8</div>
  <div class="item item--9">9</div>
  <div class="item item--10">10</div>
</div>

SCSS

.parent {
  display: grid;
  width: 200px;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(4, 50px);
}

.item {
  border: 1px solid black;

  &--1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
  
  &--6 {
    grid-column: 3 / 5;
    grid-row: 2 / 4;
  }
}