JSFiddle - React, Tailwind, and code Playground

by starostyants

HTML

<div class="container">
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item span6"></div>
  <div class="container__item span6"></div>
  <div class="container__item span4"></div>
  <div class="container__item span4"></div>
  <div class="container__item span4"></div>
  <div class="container__item span6"></div>
  <div class="container__item span6"></div>
  <div class="container__item span4"></div>
  <div class="container__item span4"></div>
  <div class="container__item span4"></div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(auto-fill, 80px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  counter-reset: item 0;
}
.container__item {
  background-color: green;
  min-height: 80px;
}
.container__item:before {
  counter-increment: item;
  content: counter(item);
}
.container__item:nth-child(1) {
  grid-area: 1 / 1 / 4 / 9;
}
.container__item:nth-child(2) {
  grid-area: 1 / 9 / 1 / 13;
}
.container__item:nth-child(3) {
  grid-area: 2 / 9 / 2 / 13;
}
.container__item:nth-child(4) {
  grid-area: 3 / 9 / 3 / 13;
}
.container__item.span6  {
  grid-column: span 6;
  grid-row: auto;
}
.container__item.span4  {
  grid-column: span 4;
  grid-row: auto;
}