JSFiddle - React, Tailwind, and code Playground

by momenelkamri

HTML

<div class="wrapper">
  <div class="item-1-2">1</div>
  <div class="item-1-2">2</div>
  <div  class="item3">3</div>
  <div class="item4">4</div>
  <div>5</div>
  <div>6</div>
</div>

CSS

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 50px 50px;
}
.wrapper {
  
}

div:not(.wrapper) {
  border: 5px solid #000;
}

.item-1-2 {
    /* grid-column: 1/3; */
     grid-column-start: 1; 

    grid-column-end: span 2;
    
    /* grid-row: 1/3 */
}

.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}

.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}