JSFiddle - React, Tailwind, and code Playground

by trentHarlem

HTML

<div class="container">
  <div class="item box13">13</div>
  <div class="item box8">8</div>
  <div class="item box5">5</div>
  <div class="item box3">3</div>
  <div class="item box2">2</div>
  <div class="item box1">1</div>
  <div class="item box1">1</div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 0px;
   /* grid-template-rows: 80px 10px 10px 30px; */
  grid-template-rows: 8fr 1fr 1fr 3fr;
  grid-template-columns: 13fr 2fr 1fr 5fr;
  height: 260px;
  width : 420px;
}

.item {
  background-color: #ddd;
  border: 1px solid #ccc;
}

.box13 {
  grid-row: 1 / 5;
}
.box8 {
  grid-column: 2 / 5;
}
.box5 {
  grid-row: 2 / 5;
  grid-column: 4 / 5; 
}
.box3 {
  grid-row: 4 / 5;
  grid-column: 2 / 4;  
}
.box2 {
  grid-row: 2 / 4;
  grid-column: 2 / 3;
}