JSFiddle - React, Tailwind, and code Playground

by Majo Chiou

HTML

<div class="boxes">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4<br />4<br />4<br />4<br />4<br />4<br />4<br />4<br />4<br />4<br />4<br />4<br /></div>
 <div class="boxA">5 (A)</div>
 <div class="boxB">6 (B)</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 <div>10<br />10<br />10<br />10<br />10<br />10<br />10<br />10<br />10<br />10<br />10<br />10</div>
</div>

CSS

.boxes {
  display: grid;
  grid-template-columns: 3fr repeat(3, 1fr);
  grid-auto-rows: minmax(80px, auto) 40px minmax(auto, 100px);
  grid-column-gap: 5px;
  grid-row-gap: 15px;
}

.boxes div {
  overflow: hidden;
  background: #9cf;
  border:1px solid black;
  /* margin-bottom: 50px; */
}

.boxes div.boxA {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
z-index:2;
background-color:#77cfe6;
opacity:0.8;
}

.boxes div.boxB {
grid-column: 2/4;
grid-row: 1/4;
z-index:1;
background-color:#ff9ecb;
}