JSFiddle - React, Tailwind, and code Playground

by swordys

HTML

<div id="container">
  <div class="content-3x">
    3
  </div>
  <div class="content-2x double-height">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-3x">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-3x">
    6
  </div>
  <div class="content-2x double-height">
    7
  </div>
  <div class="content-1x">
    8
  </div>
  <div class="content-1x">
    9
  </div>
  <div class="content-3x">
    10
  </div>
</div>

CSS

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border: 1px solid red;
}

.double-height {
  height: 31rem;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / span 2 / span 2;
}

.content-1x {
  grid-area: auto / auto / auto / span 1;
}